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>
相關標籤/搜索
datepicker
插件
datepicker&timepicker
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。