datepicker 插件

时间 2019-11-08
标签 datepicker 插件繁體版
原文原文链接
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>