JqueryUI datepicker(日历)插件的from to的一个小实例

原创 2012年03月27日 21:36:58

JqueryUI datepicker(日历)插件的from to的一个小实例

我们通过上一节,我们了解并会写了用jqueryUI datepicker插件选择日期的方法,现在我来简单的介绍一下一个起始日期和结束日期的效果。

也就是说,当我们选择一个起始日期的时候,我们在选择结束日期的时候,我们所选的结束日期时,所选的起始日期以前的日期就不能选择了。可能这样说有一点的绕,那么下面我们来看一下实现的效果吧。如下图所示:

正如我们选择了出生日期为“2012-03-21”,那么,当我们选定结束日期的时候,如图中一样,在“2012-03-21”之前的日期就会变成这样的浅灰色,不能再进行选择了。只能选择“2012-03-21”之后的日期了。

相反的来说,当我们先选择结束日期的时候,那么当我们再选定出生日期的时候,则我们所选定结束日期之后的日期就不能在进行选择了。

说了这么多,我们来具体看一下它的实现流程和代码吧。

一、首先,我们要将所需要的相应的jqueryUI类库文件导入到JSP中。

如下:

<!-- 引入相应的jqueryUI的类库文件 -->

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>

    <script src="${pageContext.request.contextPath}/js/jquery.ui.datepicker.js"></script>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">

二、 下面我们要将显示的效果编写出来,如下代码:

<body>

    <h1>日历插件</h1>

    <div id="datepicker"></div>

    <form action="" method="get">

    出生日期:<input type="text" id="dp"/>

    结束日期:<input type="text" id="end"/>

    </form>

  </body>


三、 最后,我们就要编写Javascript代码了,来实现我们所需的效果。

<script type="text/javascript">

    $(document).ready(function(){

    

    //开始日期

       var dates = $("#dp,#end").datepicker({

           //inline:true,

           changeMonth:true, //在日期的标题栏中是否出现下拉选择框,选择日期中的月份。true代表有选择框,false代表无选择框

           changeYear:false, //在日期的标题栏中是否出现下拉选择框,选择日期中的年份。true代表有选择框,false代表无选择框

           showButtonPanel:true,  //在日期面板的下方出现两个按钮,一个是今天,一个是关闭。默认值是false,不显示的

           closeText:"关闭",  //必须结合showButtonPanel使用,并且showButtonPanel的值必须是true,否则看不到效果

           dateFormat:"yy-mm-dd",  //表示日期显示的格式

           defaultDate:-3,  //缺省值在当前日期中加或减几天

           showAnim:"toggle",  //日期界面出现的动画效果

           showWeek:true,    //显示周  当前中的第几周

           firstDay:1,   //默认firstDay 当前的第一天

           yearRange:"2011:2012",   //表示下拉框中年份的范围

           onSelect:function(selectedDate){

           //alert(selectedDate);

                  //获取当前对象this。id=dp minDate  //开始日期的最小值

                     //获取 option的值是minDat或者是maxDate  根据dom对象的

                     var option = this.id == "dp" ? "minDate" : "maxDate",

                     //获取当前日期的实例对象,每遍历一次就获取一次

                     instance = $( this ).data( "datepicker" ),

                     //获取日期   instance.settings 获取日期的值

                     date = $.datepicker.parseDate(

                     instance.settings.dateFormat ||

                     $.datepicker._defaults.dateFormat,

                     selectedDate, instance.settings );

                     //设置日期

                     dates.not( this ).datepicker( "option", option, date );

           }

       });

    });

</script>


通过以上的代码就能实现我们所需的效果,代码的一些解析如代码中的注释。如有其它问题,请留言。

jQueryUI中Datepicker(日历)插件的介绍和使用

http://jqueryui.com/datepicker/ jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: ...
  • fjseryi
  • fjseryi
  • 2016年07月18日 15:11
  • 7168

jQuery-ui插件datepicker的参数使用详解

概述日期选择插件是一个配置灵活的插件,你可以定义它的展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。同时,你还可以通过键盘控制它:page up/down - 上一月、下一...
  • hliq5399
  • hliq5399
  • 2014年03月28日 15:50
  • 54457

jQuery ui Datepicker日期插件

  • 2014年08月07日 09:10
  • 84KB
  • 下载

datepicker 实例

jQuery UI Datepicker - Default functionality body { font-family: "Trebuchet MS", "He...
  • njcgosling
  • njcgosling
  • 2015年07月22日 11:32
  • 179

用DatePicker和TimePicker写的选择日期时间示例

  • 2015年05月28日 09:30
  • 1.49MB
  • 下载

用DatePicker和TimePicker写的一个日历时间选择案例

整个例子就用了DatePicker和TimePicker来完成,非常简单。简单介绍下DatePicker 、 TimePicker ,它们都继承自android.widget.FrameLayout,...
  • Monas
  • Monas
  • 2015年05月27日 17:11
  • 1101

DatePicker和TimePicker小例子

  • 2015年11月11日 22:02
  • 1.29MB
  • 下载

My97DatePicker日期控件用法(详细步骤带案例)

MyDatePicker介绍及基本用法 一. MyDatePicker介绍及下载 介绍及下载官方网站:http://www.my97.net/dp/demo/index.htm  二. MyDateP...
  • csmnjk
  • csmnjk
  • 2016年01月20日 14:58
  • 921

jQuery UI -- 日历选择器

用jQuery UI实现的日期选择器   在这之前,我们先来了解一下jQuery UI。jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交...
  • csdn_yudong
  • csdn_yudong
  • 2016年11月21日 22:27
  • 1909

jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 说明 ...
  • redarmy_chen
  • redarmy_chen
  • 2012年03月27日 21:10
  • 19716
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JqueryUI datepicker(日历)插件的from to的一个小实例
举报原因:
原因补充:

(最多只允许输入30个字)