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

来源：互联网发布：网络编程入门书籍编辑：程序博客网时间：2024/05/16 23:47

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

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

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

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

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

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

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

如下：

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

<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>

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