daterangepicker -- bootstrap日期時間範圍插件使用分享

時間 2019-11-11

標籤 daterangepicker bootstrap 日期時間範圍插件使用分享欄目 Bootstarp 简体版

原文原文鏈接

分享說明:css

　　項目中要使用日期時間範圍選擇對數據進行篩選;精確到年月日時分秒;起初,使用了layui的時間日期選擇插件;可是在IIE8第一次點擊會報設置格式錯誤;研究了好久沒解決,但能肯定不是layui的問題;由於本身寫的demo能夠在IE8運行;只是在個人項目環境下某些代碼衝突了;因此換用了bootstrap插件daterangepicker;看了不少資料;結合官網了文檔;基本算是搞定了;把個人總結代碼分享給你們;但願對使用daterangepicker插件的初學者有幫助.html

　　總結分爲四個部分;日期範圍選擇實現,日期時間選擇,使用兩個單日曆實現範圍選擇,使用div代替input實現日期時間選擇;下面是代碼jquery

css 代碼bootstrap

    <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         &nbsp;<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
21         <span></span> <b class="caret"></b>
22     </div>

js 代碼;按照上下順序對應html四部分app

 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);

效果圖:ui

第一部分:spa

第二部分:插件

第三部分就是兩個第二部分組實現第一部分的效果;原理爲在肯定好開始日期後;設置選擇結束日期日曆的最小選擇日期;在結束日期選中後;設置開始日期的最大選擇日期;3d

第四部分:

　　關鍵選項的含義已經在代碼中註釋了;引入文件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的朋友.若有錯誤,但願你們指出