美文网首页
使用bootstrap-datepicker选择联动日期时

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

作者: Tokeme | 来源:发表于2021-01-23 15:13 被阅读0次

有时候需要选一个日期范围,又不是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'); //选出日期不规范时,强行弹框让其重选
            }
});

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

相关文章

网友评论

      本文标题:使用bootstrap-datepicker选择联动日期时

      本文链接:https://www.haomeiwen.com/subject/xsnlyctx.html