jQuery学习之Datepicker日期选择插件..docVIP

/blog/557514 在Web开发中，总会遇到需要用户输入日期的情况。一般都是提供一个text类型的input供用户输入日期。然而，这种方式，开发人员必须对用户输入的日期进行验证，判断其合法性。除此之外，用户输入日期也是一件不爽的事，如果用户可以直接选择日期，这两个问题都解决了。听起来很不错。实际上，很多开发者都是这么做的。 我们可以自己用javascript写一个日期选择控件，然而，想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件：datepicher，可以帮我们实现该功能，而且界面很漂亮。下面就学学如何使用它吧。 datepicher插件是jQuery UI的一个插件，它提供一个日期弹出窗口（或直接显示在页面），供用户选择日期。 datepicher插件的使用很简单，语法如下： Javascript代码 $(#regDate).datepicher(optional);?? $(#regDate).datepicher(optional); 其中optional是一个对象，该对象的每一个属性及含义可以参看官方文档：/demos/datepicker/。在此，仅介绍一些常用的属性。 1、datepicher最简单的使用 Javascript代码 $(#regDate).datepicher();?? $(#regDate).datepicher(); 其中,regDate是页面日期输入框的ID属性值。 就这一句话，在日期输入框获得焦点时，就会弹出一个日期选择窗口。然而，这时候的日期选择窗口有很多不方便的地方，比如：只能一个月一个月的往前或往后，没有关闭按钮等。 2、配置datepicher 通过给datepicher设置一些属性值可以改变默认的显示。如： Javascript代码 $(#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), ?? ?});?? $(#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), }); 这个时候的日期选择就很方便了。可以自由选择年份和月份。 3、增加清除按钮和日期判断功能（增强版datepicher1.7.2） datepicher1.7.2版本没有提供清除按钮，这让人有点遗憾。（好像之前的版本有提供）。没有清除