使用bootstrap-datepicker选择联动日期时

2021-01-23  本文已影响0人  Tokeme

有时候需要选一个日期范围,又不是date-range这种情况的,使用如下设置实现相应功能:

image.png
$('.start_date, .end_date').datepicker({
            language: 'zh-CN',
            autoclose: true,
            clearBtn: true,
            endDate: new Date(),
            todayHighlight: true,
});

$('.start_date').on('changeDate', function (e) {
            var tmp = $('.start_date').val();
            var enddate1 = moment(tmp).add(15, 'days').isBefore(moment()) ? moment(tmp).add(15, 'days').format('YYYY-MM-DD'): new Date();
            $('.end_date').datepicker('setStartDate', tmp);
            $('.end_date').datepicker('setEndDate', enddate1);
            if(moment(enddate1).isBefore($('.end_date').val())){
                $('.end_date').datepicker('show');
            }
            if(moment($('.end_date').val()).isBefore(moment(tmp))){
                // $('.end_date').val('');
                $('.end_date').datepicker('show'); //选出日期不规范时,强行弹框让其重选
            }
});

根据起始日期的变化,来控制结束日期的选择范围,从而避免用户选出错误的时间范围。

上一篇下一篇

猜你喜欢

热点阅读