bootstrap雙日曆插件實例化

時間 2019-11-09

原文原文鏈接

網站中不免會用到日期選擇插件,常見的有jquery的,也有bootstrap的.單日曆的就不說了,實例化都比較簡單.今天給你們介紹一下bootstrap的雙日曆插件.css

http://www.jq22.com/jquery-info1087 這是雙日曆插件下載地址,demo裏面有介紹須要引入那些js和css文件.html

1.直接進入到js實例化部分:jquery

 1 function timePicker(){
 2     var option={
 3         locale:{
 4             fromLabel: '開始日期',
 5             toLabel: '結束日期'
 6         },
 7         maxDate:new Date(new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+(new Date().getDate()+1)),//雙日曆容許最大的結束日期
           opens:'left',//日曆與輸入框的對其方式,當前爲右對齊
 8         //maxDate:moment(),//設置成moment(),有一個bug,那就是不能選擇今天(好比2016-7-21)
 9         //dateLimit:{//起止時間容許的範圍
10         //    days:30
11         //},
12         showDropdowns : true//這個屬性能夠實現下拉選擇年份
13     };
14     $('#calenderAccount').daterangepicker(option);
15     setTimeout(function () {
16        17         
18         $('#calenderImg').click(function (e) {
19             if(e.stopPropagation()){
20                 e.stopPropagation();
21             }else if(e.cancelBubble){
22                 e.cancelBubble=true
23             }
24             $('#calenderAccount').trigger('click')
25         });
26         $('.clearInputTime').click(function () {//實現清空的功能
27             $('#calenderAccount').val('');
28             $('#startTime').val('');
29             $('#endTime').val('');
30             $('.cancelBtn ').trigger('click')
31         })
32     },400);
33 }

2.因爲配置參數裏面並無清空按鈕,可是項目爲了實現這一個功能,因此本身在源碼裏面添加了一行,增長了一個清空按鈕:bootstrap

 1 var DRPTemplate = '<div class="daterangepicker dropdown-menu">' +
 2 
 3             '<div class="ranges">' +
 4             '<div class="range_inputs">' +
 5             '<div class="daterangepicker_start_input">' +
 6             '<label for="daterangepicker_start"></label>' +
 7             '<input class="input-mini" type="text" name="daterangepicker_start" value="" disabled="disabled" />' +
 8             '</div>' +
 9             '<div class="daterangepicker_end_input">' +
10             '<label for="daterangepicker_end"></label>' +
11             '<input class="input-mini" type="text" name="daterangepicker_end" value="" disabled="disabled" />' +
12             '</div>' +
13             '<button class="applyBtn" disabled="disabled"></button>&nbsp;' +
14             '<button class="cancelBtn btnDone"></button>' +
15             '<button class="clearInputTime" style="float: right;margin-right: 10px">清空</button>' +
16             '</div>' +
17             '</div>' +
18             '<div class="clear"></div>' +
19             '<div class="calendar left"></div>' +
20             '<div class="calendar right"></div>' +
21             '</div>';

最終的效果以下圖:app

點擊上方的input框,會彈出雙日曆選擇器,選擇了日期以後,須要點擊肯定,輸入框內纔會有值,若是須要清空輸入框的值,只須要再次激活日曆選擇器,點擊清空便可網站

或者參考源碼:daterangepicker.js裏面的下列代碼:插件

setOptions: function(options, callback) {

            this.startDate = moment().startOf('day');
            this.endDate = moment().endOf('day');
            this.minDate = false;
            this.maxDate = false;
            this.dateLimit = false;

            this.showDropdowns = false;
            this.showWeekNumbers = false;
            this.timePicker = false;
            this.timePickerIncrement = 30;
            this.timePicker12Hour = true;
            this.singleDatePicker = false;
            this.ranges = {};

            this.opens = 'right';
            if (this.element.hasClass('pull-right'))
                this.opens = 'left';

            this.buttonClasses = ['btn', 'btn-small'];
            this.applyClass = 'btn-success';
            this.cancelClass = 'btn-default';

            this.format = 'YYYY-MM-DD';
            this.separator = ' - ';

            this.locale = {
                applyLabel: '肯定',
                cancelLabel: '取消',
                fromLabel: '從',
                toLabel: '到',
                weekLabel: 'W',
                customRangeLabel: 'Custom Range',
                daysOfWeek: moment()._lang._weekdaysMin.slice(),
                monthNames: moment()._lang._monthsShort.slice(),
                firstDay: 0
            };