daterangepicker 日期插件,根据前一个日期框选择的时间来初始化另一个日期框

Date Range Picker 插件官网

            $('#minDate').daterangepicker({
                "singleDatePicker": true,
                "timePicker": true,
                "timePicker12Hour": false,
                "timePicker24Hour": true,
                "startDate": new Date(),
                "autoUpdateInput": false,
                "autoApply": true,
                "endDate": "06/29/2018"
            }, function (start, end) {
                //不要在这里给input框赋值,当用户使用我们给出的默认开始时间时,该回调不触发
            });
            //结束日期框点击的限制
            $("#maxDate").click(function () {
                console.log(11);
                var start = $('#minDate').val();
                if (!start || start.length == 0) {
                    alert(1);
                    return;
                }
            });
            //开始日期选择按钮的点击事件监听
            //即使用户没有选择时间,采用了默认的开始时间,也可以赋值
            $('#minDate').on('apply.daterangepicker', function (ev, picker) {
                console.log("apply:"+picker.startDate.format('YYYY-MM-DD HH:mm'));
                //将选择的时间赋值给input
                $('#minDate').val(picker.startDate.format('YYYY-MM-DD HH:mm'));                        

                    //初始化结束日期的空件
                    $('#maxDate').daterangepicker({
                    "singleDatePicker": true,
                    "timePicker": true,
                    "timePicker24Hour": true,
                    "startDate": ..,//根据用户选择的时间来选择初始化的开始时间
                    "autoUpdateInput": false,
                    "endDate": ..//根据用户选择的时间来选择初始化的结束时间
                }, function (start, end, label) {
                });

            });
            //结束日期的监听
            $('#maxDate').on('apply.daterangepicker', function (ev, picker) {
                console.log("apply:"+picker.startDate.format('YYYY-MM-DD HH:mm'));
                $('#maxDate').val(picker.startDate.format('YYYY-MM-DD HH:mm'));
            });

源文件里面只有设置startDate和endDate的方法,如果需要设置minDate和maxDate,则可以在源文件里面的450行左右的DateRangePicker.prototype = {**}加入如下两个方法:

setMinDate: function(minDate){
            if (typeof minDate === 'string')
                this.minDate = moment(minDate, this.locale.format);

            if (typeof minDate === 'object')
                this.minDate = moment(minDate);

            if (!this.timePicker)
                this.minDate = this.minDate.startOf('day');

            if (this.timePicker && this.timePickerIncrement)
                this.minDate.minute(Math.round(this.minDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);

            if (this.minDate && this.startDate.isBefore(this.minDate)) {
                this.startDate = this.minDate.clone();
                if (this.timePicker && this.timePickerIncrement)
                    this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
            }

            if (!this.isShowing)
                this.updateElement();

            this.updateMonthsInView();
        },

        setMaxDate: function(maxDate){
            if (typeof maxDate === 'string')
                this.maxDate = moment(maxDate, this.locale.format);

            if (typeof maxDate === 'object')
                this.maxDate = moment(maxDate);

            if (!this.timePicker)
                this.maxDate = this.maxDate.startOf('day');

            if (this.timePicker && this.timePickerIncrement)
                this.maxDate.minute(Math.round(this.maxDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);

            if (this.maxDate && this.startDate.isAfter(this.maxDate)) {
                this.startDate = this.maxDate.clone();
                if (this.timePicker && this.timePickerIncrement)
                    this.startDate.minute(Math.floor(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
            }

            if (!this.isShowing)
                this.updateElement();

            this.updateMonthsInView();
        }

使用方法:

$(selector).data('daterangepicker').setMinDate(日期);
$(selector).data('daterangepicker').setMaxDate(日期);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值