jQueryUI的datepicker日期选择器的使用方法

1.引入文件

jquery.x.x.x.js文件

jquery-ui-x.x.x.custom.js文件

jquery-ui-x.x.x.custom.min.css文件

例子:

<script src="js/jquery-1.9.1.js"></script><script src="js/jquery-ui-1.10.3.custom.min.js"></script><link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css">

2.写显示日期文本框

例子:

<br><!--这个是可以下拉列表的形式选择月份和年份的形式--><input type="text" name="datepicker" id="datepicker"><br><!--这是是可以选择从一个日期到一个日期区间的选择形式--><label for="from">From</label><input type="text" id="from" name="from"/><label for="to">to</label><input type="text" id="to" name="to"/>

3.script中编写代码

例子:

<script>//汉化日期的代码$((function($){$.datepicker.regional['zh-CN'] = {clearText: '清除',clearStatus: '清除已选日期',closeText: '关闭',closeStatus: '不改变当前选择',prevText: '<上月',prevStatus: '显示上月',prevBigText: '<<',prevBigStatus: '显示上一年',nextText: '下月>',nextStatus: '显示下月',nextBigText: '>>',nextBigStatus: '显示下一年',currentText: '今天',currentStatus: '显示本月',monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'],monthStatus: '选择月份',yearStatus: '选择年份',weekHeader: '周',weekStatus: '年内周次',dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],dayNamesMin: ['日','一','二','三','四','五','六'],dayStatus: '设置 DD 为一周起始',dateStatus: '选择 m月 d日, DD',dateFormat: 'yy-mm-dd',firstDay: 1,initStatus: '请选择日期',isRTL: false};$.datepicker.setDefaults($.datepicker.regional['zh-CN']);})(jQuery));////可以下拉列表的方式-选择月份和年份$(function(){$('#datepicker').datepicker({//可以下拉列表的方式-选择月份和年份changeMonth: true,changeYear: true});});//选择一个日期区间$(function() {$( "#from" ).datepicker({defaultDate: "+1w",changeMonth: true,numberOfMonths: 3,onClose: function( selectedDate ) {$( "#to" ).datepicker( "option", "minDate", selectedDate );}});$( "#to" ).datepicker({defaultDate: "+1w",changeMonth: true,numberOfMonths: 3,onClose: function( selectedDate ) {$( "#from" ).datepicker( "option", "maxDate", selectedDate );}});});</script>