jquery ui datepicker使用

时间 2019-12-13

原文原文链接

在Web开发中，总会遇到须要用户输入日期的状况。通常都是提供一个text类型的input供用户输入日期。然而，这种方式，开发人员必须对用户输入的日期进行验证，判断其合法性。除此以外，用户输入日期也是一件不爽的事，若是用户能够直接选择日期，这两个问题都解决了。听起来很不错。实际上，不少开发者都是这么作的。

咱们能够本身用javascript写一个日期选择控件，然而，想要写的很好、很漂亮却须要花很多时间和精力。jQuery有一个UI插件：datepicher，能够帮咱们实现该功能，并且界面很漂亮。下面就学学如何使用它吧。

datepicher插件是jQuery UI的一个插件，它提供一个日期弹出窗口（或直接显示在页面），供用户选择日期。

datepicher插件的使用很简单，语法以下：javascript

$("#regDate").datepicher(optional);

　　其中optional是一个对象，该对象的每个属性及含义能够参看官方文档：http://jqueryui.com/demos/datepicker/。在此，仅介绍一些经常使用的属性。

一、datepicher最简单的使用

Javascript代码 css

$("#regDate").datepicher();

　　其中,regDate是页面日期输入框的ID属性值。

就这一句话，在日期输入框得到焦点时，就会弹出一个日期选择窗口。然而，这时候的日期选择窗口有不少不方便的地方，好比：只能一个月一个月的往前或日后，没有关闭按钮等。

二、配置datepicher

经过给datepicher设置一些属性值能够改变默认的显示。如：html

$("#regDate").datepicker(      
{      
  showMonthAfterYear: true, // 月在年以后显示      
  changeMonth: true,   // 容许选择月份      
  changeYear: true,   // 容许选择年份      
  dateFormat:'yy-mm-dd',  // 设置日期格式      
  closeText:'关闭',   // 只有showButtonPanel: true才会显示出来      
  duration: 'fast',      
  showAnim:'fadeIn',      
  showOn:'button',   // 在输入框旁边显示按钮触发，默认为：focus。还能够设置为both      
  buttonImage: 'images/commons/calendar.gif',   // 按钮图标      
  buttonImageOnly: true,        // 不把图标显示在按钮上，即去掉按钮      
  buttonText:'选择日期',      
  showButtonPanel: true,      
  showOtherMonths: true,      
 //appendText: '(yyyy-mm-dd)',      
});

　　这个时候的日期选择就很方便了。能够自由选择年份和月份。

三、增长清除按钮和日期判断功能（加强版datepicher1.7.2）

datepicher1.7.2版本没有提供清除按钮，这让人有点遗憾。（好像以前的版本有提供）。没有清除按钮是很不方便的，特别是输入框得到焦点就弹出日期选择窗口的状况更是如此，由于这时想要清除输入框中的日期比较麻烦。在此推荐一位网友提供的加强版datepicher1.7.2。该加强版datepicher1.7.2不只实现了清除按钮功能，并且增长了日期大小比较验证，好比：一个日期只能在另外一个以后。能够访问该网址查看：http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html。这时datepicher的使用已经至关完美：java

$(function()      
{      
$("#effDate").datepicker(      
{      
  showMonthAfterYear: true, // 月在年以后显示      
  changeMonth: true,   // 容许选择月份      
  changeYear: true,   // 容许选择年份      
  dateFormat:'yy-mm-dd',  // 设置日期格式      
  showClearButton: true,      
 //clearText: '清除',      
  closeText:'关闭',   // 只有showButtonPanel: true才会显示出来      
  duration: 'fast',      
  showAnim:'fadeIn',      
  showOn:'button',      
  buttonImage: 'images/commons/calendar.gif',      
  buttonImageOnly: true,      
  buttonText:'选择日期',      
  showButtonPanel: true,      
  showOtherMonths: true,      
 //appendText: '(yyyy-mm-dd)',      
  onSelect: function(dateText, inst)    // 使结束时间大于开始时间      
  {      
  /**  
    * 如下写法在IE中出现问题。  
    * $('#expDate').datepicker('option', 'minDate', new Date(dateText.replace(/-/g,',')));  
    * 时，在结束（过时时间）选择时，年会没有，并且控制会失效。经过调试，发现new Date(dateText.replace(/-/g,','))  
    * 返回的结果是NaN。说明Date对象不能这么构造（可是Firefox能够）  
    */      
   var arys = new Array();      
   var arys = dateText.split('-');      
    $('#expDate').datepicker('option', 'minDate', new Date(arys[0],arys[1]-1,arys[2]));      
  }      
});      
     
$("#expDate").datepicker(      
{      
  showMonthAfterYear: true, // 月在年以后显示      
  changeMonth: true,   // 容许选择月份      
  changeYear: true,   // 容许选择年份      
  dateFormat:'yy-mm-dd',  // 设置日期格式      
  showClearButton: true,  // 自定义的方法(1.7.2没有清除按钮）      
 //clearText: '清除',    // 自定义的文本，在文档在有定义（js中）      
  closeText:'关闭',   // 只有showButtonPanel: true才会显示出来      
  duration: 'fast',      
  showAnim:'fadeIn',      
  showOn:'button',   // 在输入框旁边显示按钮触发，默认为：focus。还能够设置为both      
  buttonImage: 'images/commons/calendar.gif',   // 按钮图标      
  buttonImageOnly: true,        // 不把图标显示在按钮上，即去掉按钮      
  buttonText:'选择日期',      
  showButtonPanel: true,      
  showOtherMonths: true,      
 //appendText: '(yyyy-mm-dd)',      
  onSelect: function(dateText, inst)      
  {      
  var arys = new Array();      
  var arys = dateText.split('-');      
   $('#effDate').datepicker('option','maxDate',new Date(arys[0],arys[1]-1,arys[2]));      
  }      
});      
});

　　四、国际化

datepicher提供了国际化的功能。只需将ui.datepicker-zh-CN.js导入页面便可。（或者导入jquery-ui-i18n.js，该文件包含了不少中语言）注意，若是想使用上面提到的加强版datepicher1.7.2，则须要下载做者提供的国际化文件。另外，若是用Eclipse之类的工具编码，注意用eclipse打开国际化文件看看，颇有可能显示为乱码。只须要把文件的编码格式改成utf-8，而后用其余编辑工具，如editplus打开国际化文件，拷贝，粘贴覆盖eclipse中的，保存就OK了。

五、国际化为中文可能遇到的显示问题

在使用国际化同时启用changeYear和changeMonth后，两个select显示为两行，很很差看。找了很久，发如今官方提供的jquery-ui-1.7.2.custom.css中，应该做以下几处修改： jquery

.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; } 
.ui-datepicker select.ui-datepicker-month-year {width: 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;} 
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }

　　应该改成： app

.ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; } 
.ui-datepicker select.ui-datepicker-month-year {width: 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 47%;} 
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; }

就OK了

六、换肤

jQuery UI预约义了不少皮肤，下载后，只需在页面引入相应皮肤的jquery-ui-1.7.2.custom.css能够实现换肤。若是给用户提供换肤功能，能够经过js控制，实现换肤。

总结：

能够看出，datepicher是一个很好用的插件，比本身写的确定要好用不少，推荐你们使用。

另外，在使用中，能够定义一个文件，包含该插件的使用，配置好。之后有须要使用的地方，引入该文件，同时传给当前须要使用日期选择控件的id属性，这样即可以只配置一次了。eclipse

其余实用方法：函数

使用方法：工具

1.限制日期ui

$("#resultDiv").datepicker({                onSelect: function (dateText, inst) {                    //代码：选择日期后触发的事件                },                minDate: new Date(),//最小日期                maxDate: new Date($("#DateLimit").val())//最大日期            });

　　2.中文

jQuery(function ($) {        $.datepicker.regional['zh-CN'] = {            closeText: '关闭',            prevText: '<上月',            nextText: '下月>',            currentText: '今天',            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',                '七月', '八月', '九月', '十月', '十一月', '十二月'],            monthNamesShort: ['一', '二', '三', '四', '五', '六',                '七', '八', '九', '十', '十一', '十二'],            dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],            dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],            weekHeader: '周',            dateFormat: 'yy-mm-dd',            firstDay: 1,            isRTL: false,            showMonthAfterYear: true,            yearSuffix: '年'        };        $.datepicker.setDefaults($.datepicker.regional['zh-CN']);    });

开始日期(minDate)和结束日期(maxDate)

下面为两种实现步骤：

思路一：

第一步实现两个datepicker组件。

须要定义两个input标签，类型为text，并指定id属性

HTML代码以下

开始日期：<input type="text" id="start">

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

在js代码中获得两个input元素的jQuery对象，并将其转化为datepicker组件

Js代码以下

$(document).ready(function(){  
 
   $("#start").datepicker();  
 
   $("#end").datepicker();  
 
});

实现以上操做后，在页面中点击文本框，若是出现datepicker则表明成功。

第二步设置开始和结束日期

当选择开始日期的值后，则结束日期的最小值应该就是开始日期；同理，当选择结束日期后，开始日期的最大值则应该是结束日期。咱们能够利用datepicker中的onSelect属性来设置当选择指定日期后触发的事件，经过该事件来指定对应的datepicker最小日期或最大日期。

Js代码以下

$("#start").datepicker({  
 
   onSelect:function(dateText,inst){  
 
      $("#end").datepicker("option","minDate",dateText);  
 
   }  
 
});  
 
$("#end").datepicker({  
 
   onSelect:function(dateText,inst){  
 
       $("#start").datepicker("option","maxDate",dateText);  
 
   }  
 
});

注：匿名函数中的dateText属性为当前选择日期的字符串

思路二：

第一步同时得到两个文本框对象，并将其转换为datepicker（利用jQuery的选择器）

HTML代码以下

开始日期：<input type="text" id="start">

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

Js代码以下

var dates = $("#start,#end");  
 
dates.datepicker();

第二步一样在选择日期后，触发onSelect事件，调用函数传递selectedDate参数，

函数体中首先判断触发事件的是开始日期仍是结束日期，经过该判断来指定设置minDate或者是maxDate，而后利用not()函数，来反向选择另外一个datepicker对象，并设置其对应的属性。

Js代码以下

dates.datepicker({  
 
   onSelect: function(selectedDate){  
 
      var option = this.id == "start" ? "minDate" : "maxDate";  
 
      dates.not(this).datepicker("option", option, selectedDate);  
 
   }  
 
});

　　这样在设置一方后，另外一方就会被限制了。