美文网首页
使用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