文本框下载jQuery UI Datepicker精美的日期选择组件

时间紧张，先记一笔，后续优化与完善。

    期日择选组件在平常开辟中应用还是非常泛广的，jQuery UI Datepicker作为jQuery UI的期日择选组件，不仅应用活灵、主题富丰多样，更因为平常泛广应用jQuery，所以是一个不错的择选。

    

相干源资引用

    到http://jqueryui.com/download/下载应相的脚本及式样，可以下载全体或者择选要需的停止下载；另外还可以到http://github.com/jquery/jquery-ui下载它的全部码源。

    对于在文中的呈现，还要需额定的一个脚本：https://github.com/jquery/jquery-ui/blob/master/ui/i18n/jquery.ui.datepicker-zh-CN.js

    由于jQuery UI应用了em作为单位，直接在网页中应用，会变得大巨比无，所以要需额定附加一点式样(这里命名为jqueryui-fakes.css)：

    body { font-size: 12px; }.ui-widget { font-size: 1em; }.ui-datepicker { font-size: 11px; } .ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month { width: auto; }

    终究引入的源资如下：

    <link href="css/jquery-ui/cupertino/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" /><link href="css/jqueryui-fakes.css" rel="stylesheet" /><script src="js/jquery-1.8.2.min.js"></script><script src="js/jquery-ui-1.9.0.custom.min.js"></script><script src="js/jquery.ui.datepicker-zh-CN.min.js"></script>

    

应用方法

    jQuery UI Datepicker应用非常简略，首先在面页中有文本框作为标目：

    <input type="text" name="lwme" class="dp" />

    默许情况下只要需在DOMLoaded用调datepicker方法可即：

    $(function() { $(".dp").datepicker();});

    

使文本框只读

    这里要需注意，如果文本框不允许输入的话，要需设置readonly属性：

    $(".dp").prop("readOnly", true).datepicker();

    另外还要需注意，如非必要，不要直接在文本框的html属性上设置readonly(特别是asp.net TextBox)，否则后台可能不能畸形取获。

    

控制输入的字符

    开启constrainInput属性，以可就控制文本框的输入只能为dateFormat属性中定规的(没启用readonly情况下)：

    $(".dp").datepicker({ constrainInput: true });

    

显示年、月择选框

    默许情况下择选年、月比较麻烦，这里可以开启两个属性是年、月变为下拉框择选：

    $(".dp").datepicker({ changeMonth: true, changeYear: true });

    另外还可以把年下拉框显示在月下拉框之前：

    $(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true });

    设置择选的年的范围，可以是具体的年份或者是特定的格式：

    

1. "-nn:+nn"相对于当前年份，当前2012年，如"-5:+5"就是从2007-2017范围

2. "c-nn:c+nn"相对于选中的年份，如选中2013，"c-5:c+5"就是从2008-2018范围

3. "nnnn:nnnn"直接指定年份，如"2010-2013"

    $(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "-5:+5" }); $(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "c-5:c+5" }); $(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "2010:2013" });

    每日一道理
即使青春是一枝娇艳的花，但我明白，一枝独放永远不是春天，春天该是万紫千红的世界。 即使青春是一株大地伟岸的树，但我明白，一株独秀永远不是挺拔，成行成排的林木，才是遮风挡沙的绿色长城。即使青春是一叶大海孤高的帆，但我明白，一叶孤帆很难远航，千帆竞发才是大海的壮观。

    

显示期日的格式

    通过设置dateFormat属性来实现，分别用yy、mm、dd来表示年、月、日；默许值为mm/dd/yy，文中环境下一般设置为：

    $(".dp").datepicker({ dateFormat: "yy-mm-dd" });

    

控制期日范围

    通过minDate/maxDate来设置可以择选的期日范围，可以是期日类型；

    或者是特定的格式，应用三个字符来表示：

    

1. 第一个字符为+或-
2. 第二个字符为数字
3. 第三个字符表示单位如y,m,w,d表示年、月、周、天，可以拼出N中结果如："+1y" "-1m"
4. 而且可以叠加，只要中间空格隔开可即如："+1m +1w +2d"表示一个月+一周+两天

    $(".dp").datepicker({ maxDate: "+1m +1w +1d", minDate: "-1d" }); $(".dp").datepicker({ maxDate: new Date(2012,12,21), minDate: new Date(2012,12,08) });

    

显示今天及确定按钮

    $(".dp").datepicker({ showButtonPanel: true });

    还可以设置点击今天调到当前月份的日历视图：

    $(".dp").datepicker({ showButtonPanel: true, gotoCurrent: true });

    其他属性就不再一一展示了，请直接看官方API文档：http://api.jqueryui.com/datepicker/

    

择选时间功能

    jQuery UI Datepicker没有提供择选时间功能，不过有人基于jQuery UI Datepicker创造了timepicker：http://trentrichardson.com/examples/timepicker/

    可以从https://github.com/trentrichardson/jQuery-Timepicker-Addon取获它的最新版本

    

源资引入

    除了要需引入上面jQuery UI Datepicker应用的源资以外，还要需一下源资：

    <link href="js/timepicker-addon/jquery-ui-timepicker-addon.css" rel="stylesheet" /><script src="js/timepicker-addon/jquery-ui-timepicker-addon.min.js"></script><script src="js/timepicker-addon/jquery-ui-timepicker-zh-CN.min.js"></script>

    

应用方法

    它的功能分为两部分：一种是可以同时择选期日和时间的datetimepicker，另一种是只能选时间的timepicker

    $(".dp").datetimepicker(); $(".dp").timepicker();

    

参数设置

    它也有自己的一些参数可以设置，这里仅列出重要的：

    

1. timeFormat 设置时间格式，其中两个相同字母的表示不足两位补0
   1. H/HH：24小时
   2. h/hh：12小时
   3. m/mm：分钟
   4. s/ss：秒钟
   5. l：毫秒
   6. t/tt,T/TT：设置AM/PM即上午/下午
   7. z：失去
2. defaultTimezone：默许时区"+0000"
3. showHour/showMinute/showSecond/…showTimezone/showTime分别设置是否显示应相择选
4. stepHour/stepMinute/StepSecond…分别设置拖动滑块时增减的数值
5. maxDateTime/minDateTime：控制时间范围
6. controlType：控件类型："select"(下拉择选)、"slide"(拖动滑块，默许)

    

格式化输入

    有时候可能会要需可以择选也可以输入，这时候可以额定附加脚本：http://www.meiocodigo.com/projects/meiomask/或者是其他有mask功能的组件

    定义好mask格式：

    $(".dp").datepicker().setMask("9999-19-39")

    over

文章结束给大家分享下程序员的一些笑话语录： AdobeFlash拖垮Windows拖垮IE！又拖垮Linux拖垮Ubuntu拖垮FirxEox！还拖垮BSD拖垮MacOS拖垮Safri！简直无所不拖！AdobeFlash滚出网路世界！不要以为市占有率高就可以持续出烂货产品！以后替代品多得是！