jquery ui datepicker使用
在Web开发中，总会遇到需要用户输入日期的情况。一般都是提供一个text类型的input供用户输入日期。然而，这种方式，开发人员必须对用户输入的日期进行验证，判断其合法性。除此之外，用户输入日期也是一件不爽的事，如果用户可以直接选择日期，这两个问题都解决了。听起来很不错。实际上，很多开发者都是这么做的。
我们可以自己用javascript写一个日期选择控件，然而，想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件：datepicher，可以帮我们实现该功能，而且界面很漂亮。下面就学学如何使用它吧。
datepicher插件是jQuery UI的一个插件，它提供一个日期弹出窗口（或直接显示在页面），供用户选择日期。
datepicher插件的使用很简单，语法如下：
$("#regDate").datepicher(optional); $("#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)', }); $(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])); } }); });