分享說明:
項目中要使用日期時間范圍選擇對數據進行篩選;精確到年月日 時分秒;起初,使用了layui的時間日期選擇插件;但是在IIE8第一次點擊會報設置格式錯誤;研究了很久沒解決,但能確定不是layui的問題;因為自己寫的demo可以在IE8運行;只是在我的項目環境下某些代碼沖突了;所以換用了bootstrap插件daterangepicker;看了很多資料;結合官網了文檔;基本算是搞定了;把我的總結代碼分享給大家;希望對使用daterangepicker插件的初學者有幫助.
總結分為四個部分;日期范圍選擇實現,日期時間選擇,使用兩個單日歷實現范圍選擇,使用div代替input實現日期時間選擇;下面是代碼
css 代碼
<style type="text/css">
body,
ul,
p,
h3,
img,
input {
margin: 0;
padding: 0;
}
.box {
display: block;
text-align: center;
margin: 20px auto;
}
input {
width: 400px;
height: 40px;
}
label {
display: inline-block;
width: 90px;
line-height: 40px;
height: 40px;
margin: 0;
font-weight: normal;
font-family: "宋體";
background-color: #ddd;
}
.divDateSelect{
width: 185px;
height: 50px;
line-height: 50px;
margin:10px auto;
border:2px solid #ddd;
border-radius: 5px;
}
</style>
html代碼:
1 <!-- 日期時間范圍選擇代碼 --> 2 <div class="box"> 3 <label for="datePicker">雙日歷</label> 4 <input type="text" name="datePicker" class="datePicker" id="datePicker"> 5 </div> 6 <!-- 日期時間選擇代碼 --> 7 <div class="box"> 8 <label for="singledatePicker">單日歷</label> 9 <input type="text" name="singledatePicker" class="singledatePicker" id="singledatePicker"> 10 </div> 11 <!-- 兩個單日歷實現日期時間范圍選擇代碼 --> 12 <div class="box"> 13 <label for="from">從</label> 14 <input type="text" name="from" class="from" id="from"> 15 <label for="to">到</label> 16 <input type="text" name="to" class="to" id="to"> 17 </div> 18 <!-- 不使用input,用div實現代碼 --> 19 <div class="divDateSelect" id="divDateSelect"> 20 <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> 21 <span></span> <b class="caret"></b> 22 </div>
js 代碼;按照上下順序對應html四部分
1 $('input[name="datePicker"]').daterangepicker({ 2 timePicker: true, //顯示時間 3 timePicker24Hour: true, //時間制 4 timePickerSeconds: true, //時間顯示到秒 5 startDate: moment().hours(0).minutes(0).seconds(0), //設置開始日期 6 endDate: moment(new Date()), //設置結束器日期 7 maxDate: moment(new Date()), //設置最大日期 8 "opens": "center", 9 ranges: { 10 // '今天': [moment(), moment()], 11 '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 12 '上周': [moment().subtract(6, 'days'), moment()], 13 '前30天': [moment().subtract(29, 'days'), moment()], 14 '本月': [moment().startOf('month'), moment().endOf('month')], 15 '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 16 }, 17 showWeekNumbers: true, 18 locale: { 19 format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式 20 applyLabel: '確定', //確定按鈕文本 21 cancelLabel: '取消', //取消按鈕文本 22 customRangeLabel: '自定義', 23 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], 24 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', 25 '七月', '八月', '九月', '十月', '十一月', '十二月' 26 ], 27 firstDay: 1 28 }, 29 }, function(start, end, label) { 30 timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')]; 31 console.log(timeRangeChange); 32 });
1 $('input[name="singledatePicker"]').daterangepicker({ 2 "autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false 3 singleDatePicker: true, //單日歷 4 showDropdowns: true, //年月份下拉框 5 timePicker: true, //顯示時間 6 timePicker24Hour: true, //時間制 7 timePickerSeconds: true, //時間顯示到秒 8 startDate: moment().hours(0).minutes(0).seconds(0), //設置開始日期 9 maxDate: moment(new Date()), //設置最大日期 10 "opens": "center", 11 showWeekNumbers: true, 12 locale: { 13 format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式 14 applyLabel: '確定', //確定按鈕文本 15 cancelLabel: '取消', //取消按鈕文本 16 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], 17 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', 18 '七月', '八月', '九月', '十月', '十一月', '十二月' 19 ], 20 firstDay: 1 21 }, 22 }, function(start) { 23 console.log(start.format('YYYY-MM-DD HH:mm:ss')); 24 });
1 var minDate = null; 2 var max = null; 3 function fromDate(maxDate) { 4 if(!maxDate){ 5 max = moment(new Date()) 6 }else{ 7 max = maxDate; 8 } 9 $('input[name="from"]').daterangepicker({ 10 "autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false 11 singleDatePicker: true, //單日歷 12 showDropdowns: true, //年月份下拉框 13 timePicker: true, //顯示時間 14 timePicker24Hour: true, //時間制 15 timePickerSeconds: true, //時間顯示到秒 16 // startDate: moment().hours(0).minutes(0).seconds(0), //設置開始日期 17 maxDate: max , //設置最大日期 18 "opens": "center", 19 showWeekNumbers: true, 20 locale: { 21 format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式 22 applyLabel: '確定', //確定按鈕文本 23 cancelLabel: '取消', //取消按鈕文本 24 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], 25 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', 26 '七月', '八月', '九月', '十月', '十一月', '十二月' 27 ], 28 firstDay: 1 29 }, 30 }, function(s) { 31 toDate(s); 32 }); 33 } 34 fromDate() 35 function toDate(minDate) { 36 $('input[name="to"]').daterangepicker({ 37 "autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false 38 singleDatePicker: true, //單日歷 39 showDropdowns: true, //年月份下拉框 40 timePicker: true, //顯示時間 41 timePicker24Hour: true, //時間制 42 timePickerSeconds: true, //時間顯示到秒 43 // startDate: moment().hours(0).minutes(0).seconds(0), //設置開始日期 44 maxDate: moment(new Date()), //設置最大日期 45 minDate: minDate, 46 "opens": "center", 47 showWeekNumbers: true, 48 locale: { 49 format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式 50 applyLabel: '確定', //確定按鈕文本 51 cancelLabel: '取消', //取消按鈕文本 52 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], 53 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', 54 '七月', '八月', '九月', '十月', '十一月', '十二月' 55 ], 56 firstDay: 1 57 }, 58 }, function(s) { 59 fromDate(s) 60 }); 61 } 62 toDate();
1 var start = moment(new Date()); 2 function cb(start) { 3 $('#divDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss')); 4 } 5 $('#divDateSelect').daterangepicker({ 6 "autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false 7 singleDatePicker: true, //單日歷 8 showDropdowns: true, //年月份下拉框 9 // timePicker: true, //顯示時間 10 timePicker24Hour: true, //時間制 11 timePickerSeconds: true, //時間顯示到秒 12 startDate: moment().hours(0).minutes(0).seconds(0), //設置開始日期 13 maxDate: moment(new Date()), //設置最大日期 14 "opens": "center", 15 showWeekNumbers: true, 16 locale: { 17 format: "YYYY-MM-DD HH:mm:ss", //設置顯示格式 18 applyLabel: '確定', //確定按鈕文本 19 cancelLabel: '取消', //取消按鈕文本 20 daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], 21 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', 22 '七月', '八月', '九月', '十月', '十一月', '十二月' 23 ], 24 firstDay: 1 25 }, 26 }, cb); 27 cb(start);
效果圖:
第一部分:
第二部分:
第三部分就是兩個第二部分組實現第一部分的效果;原理為在確定好開始日期后;設置選擇結束日期日歷的最小選擇日期;在結束日期選中后;設置開始日期的最大選擇日期;
第四部分:
關鍵選項的含義已經在代碼中注釋了;引入文件css包括bootstrap的css文件;daterangepicker的css文件;js包括jquery的js;bootstrap的js;daterangepicker的js以及moment.js;
備注:
1 moment.js使用了數組的indexOf()方法;但IE8不支持;需要引入兼容代碼;代碼地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf 在polyfill下;
2 在IE8下;雙日歷的范圍選擇出現連個日歷豎直排列問題;解決方法為給存放兩個日歷的盒子設置固定的寬度,足以放下兩個日歷的div;再把兩個日歷的div設置float:left即可;
3 官網地址;選項設置: http://www.daterangepicker.com/#options 例子: http://www.daterangepicker.com/#examples
4 希望本文能夠幫助初識daterangepicker的朋友.如有錯誤,希望大家指出