datepicker <script> $(function () { $("#datepicker").datepicker({ showAnim: 'slideDown',//show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动 minDate: -1,//最小可选择的日期，可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 maxDate: +17,//最大可选择的日期，同上 defaultDate: +4, //默认的焦点日期，同上 duration: 'fast',//动画展示的时间，可选是"slow", "normal", "fast",''代表立刻，数字代表毫秒数 firstDay: 0,//设置一周中的第一天。默认星期天为0，星期一为1，以此类推。 nextText: '下一月',//设置“下个月”链接的显示文字。鼠标放上去的时候 prevText: '上一月',//设置“上个月”链接的显示文字。 showButtonPanel: true,//是否显示按钮面板 currentText: '今天',//设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。 gotoCurrent: false,//如果设置为true，则点击今天的按钮时，将移至当前已选中的日期，而不是今天。 changeMonth: true,显示月份的下拉框 changeYear: true, 显示年份的下拉框 numberOfMonths：3 ,设置 numberOfMonths 选项为一个整数 2，或者大于 2 的整数，来在一个 datepicker 中显示多个月份。 showOtherMonths: true,在日期框中显示其他月份的日期 selectOtherMonths: true，在日期框中选择其他月份的日期 dateFormat：格式化日期mm/dd/yy，yy-mm-dd，d M, y showOn: "button",设置点击输入框旁边的图标来显示 datepicker buttonImage: "images/calendar.gif",”button”的背景图片 buttonImageOnly: true。只点击图片的时候打开datepicker altField: "#alternate",使用 altField 和 altFormat 选项，无论何时选择日期，会在另一个输入框中填充带有一定格式的日期 altFormat: "DD, d MM, yy", 通过 minDate 和 maxDate 选项限制可选择的日期范围。 { minDate: -20, maxDate: "+1M +10D" } showWeek: true,datepicker 可以显示一年中的第几周 firstDay: 1 }); }); </script> </head> <p>日期： <input type="text" id="datepicker"> </p> datepicker提供了相关事件，在实际开发中最常用的无非就是这三个，打开前beforeShow，关闭后onClose，onselect选中，我们可以通过控制台打印相关参数调试一下具体怎么使用， onselect: function (dateText, inst) {//选中事件 console.log("onselect, dateText", dateText); console.log("onselect, inst", inst); }, beforeShow: function (input) {//日期控件显示面板之前 console.log("beforeShow, input", input); }, onClose: function (dateText, inst) {//当日期面板关闭后触发此事件（无论是否有选择日期） console.log("onClose, dateText", dateText); console.log("onClose, inst", inst); } 这里说一下onselect事件，一般我们实际项目中都会两个日期选择框，如一个开始日期，一个结束日期。那么我们肯定是会要做开始日期必须小于结束日期的校验，而我们通过onselect事件去改变另外一个日期框的最大/小日期即可做到输入的控制，如图： <input class="ipt-datepicker" type="text" id="schduleDateStart" placeholder="排班开始日期.." name="schduleDateStart"> <input class="ipt-datepicker" type="text" id="schduleDateEnd" placeholder="排班结束日期.." name="schduleDateEnd"> $("#schduleDateStart").datepicker({ onSelect: function (dateText, inst) { $("#schduleDateEnd").datepicker("option", "minDate", dateText); } }); $("#schduleDateEnd").datepicker({ onSelect: function (dateText, inst) { $("#schduleDateStart").datepicker("option", "maxDate", dateText); } }); 4，汉化： 到此为止，我们基本可以在实际项目中使用这个控件了。但是很遗憾，这个控件是老外开发的，所以底层肯定是英文的，这样用户体验肯定不好，所以我们需要引入一个zh-CN.js对控件汉化。代码很简单，当然像pervText，nextText这些我们也可以根据自己的需求做相关修改： jQuery(function($){ $.datepicker.regional['zh-CN'] = { closeText: '关闭', prevText: '<上月', nextText: '下月>', currentText: '今天', monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'], dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], dayNamesMin: ['日','一','二','三','四','五','六'], dateFormat: 'yy-mm-dd', firstDay: 1, isRTL: false}; $.datepicker.setDefaults($.datepicker.regional['zh-CN']); }); $("#schduleDateStart").datepicker("option","maxDate",dateText); $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() ); 选择要搜索的日期范围。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 选择一个日期范围</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(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> </head> <body> <label for="from">从</label> <input type="text" id="from" name="from"> <label for="to">到</label> <input type="text" id="to" name="to"> </body> </html>