bootstrap双日历插件实例化

网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件.

http://www.jq22.com/jquery-info1087     这是双日历插件下载地址,demo里面有介绍需要引入那些js和css文件.

1.直接进入到js实例化部分:

 function timePicker(){
     var option={
         locale:{
             fromLabel: '开始日期',
             toLabel: '结束日期'
         },
         maxDate:new Date(new Date().getFullYear()+'-'+(new Date().getMonth()+)+'-'+(new Date().getDate()+)),//双日历允许最大的结束日期
           opens:'left',//日历与输入框的对其方式,当前为右对齐
         //maxDate:moment(),//设置成moment(),有一个bug,那就是不能选择今天(比如2016-7-21)
         //dateLimit:{//起止时间允许的范围
         //    days:30
         //},
         showDropdowns : true//这个属性可以实现下拉选择年份
     };
     $('#calenderAccount').daterangepicker(option);
     setTimeout(function () {

         $('#calenderImg').click(function (e) {
             if(e.stopPropagation()){
                 e.stopPropagation();
             }else if(e.cancelBubble){
                 e.cancelBubble=true
             }
             $('#calenderAccount').trigger('click')
         });
         $('.clearInputTime').click(function () {//实现清空的功能
             $('#calenderAccount').val('');
             $('#startTime').val('');
             $('#endTime').val('');
             $('.cancelBtn ').trigger('click')
         })
     },);
 }

2.由于配置参数里面并没有清空按钮,但是项目为了实现这一个功能,所以自己在源码里面添加了一行,增加了一个清空按钮:

 var DRPTemplate = '<div class="daterangepicker dropdown-menu">' +

             '<div class="ranges">' +
             '<div class="range_inputs">' +
             '<div class="daterangepicker_start_input">' +
             '<label for="daterangepicker_start"></label>' +
             '<input class="input-mini" type="text" name="daterangepicker_start" value="" disabled="disabled" />' +
             '</div>' +
             '<div class="daterangepicker_end_input">' +
             '<label for="daterangepicker_end"></label>' +
             '<input class="input-mini" type="text" name="daterangepicker_end" value="" disabled="disabled" />' +
             '</div>' +
             '<button class="applyBtn" disabled="disabled"></button>&nbsp;' +
             '<button class="cancelBtn btnDone"></button>' +
             '<button class="clearInputTime" style="float: right;margin-right: 10px">清空</button>' +
             '</div>' +
             '</div>' +
             '<div class="clear"></div>' +
             '<div class="calendar left"></div>' +
             '<div class="calendar right"></div>' +
             '</div>';

最终的效果如下图:

点击上方的input框,会弹出双日历选择器,选择了日期之后,需要点击确定,输入框内才会有值,如果需要清空输入框的值,只需要再次激活日历选择器,点击清空即可

更多详细参数请参考:

http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

或者参考源码: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
            };