bootstrap 的 datetimepicker,同时有日期和时间, 且开始时间要早于结束时间

开始时间和结束时间的选择

<div class="form-group">
        <label class="col-md-2 control-label">开始时间</label>
        <div class="input-group date form_datetime col-md-5" id="start_datetime" data-date="2018-10-16T05:25:07Z"
             data-date-format="yyyy-mm-dd HH:ii" data-link-field="dtp_input1">
            <input class="form-control" size="6" type="text"  id="start_datetime_input" name="start_datetime" value="" readonly>
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
        </div>
        <input type="hidden" id="dtp_input1" value=""/><br/>
    </div>

<div class="form-group">
        <label class="col-md-2 control-label">结束时间</label>
        <div class="input-group date form_datetime col-md-5" id="end_datetime"  data-date="2018-10-16T05:25:07Z"
             data-date-format="yyyy-mm-dd HH:ii" data-link-field="dtp_input1">
            <input class="form-control" size="6" type="text" id="end_datetime_input" name="end_datetime" value="" readonly>
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
        </div>
        <input type="hidden" id="dtp_input1" value=""/><br/>
        <span id='end_validator' style="color: red">hello</span>
</div>
js代码,主要是使用datetimepicker的 setStartDate和setEndDate两个函数来设置显示。
$('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });

    const dateOptions = {
        language: 'zh-CN',
        format: 'yyyy-mm-dd HH:ii',
        minuteStep: 1,
        autoclose: true
    };

    $('#start_datetime').datetimepicker(dateOptions).on('show', function () {
        const endTime = $('#end_datetime_input').val();
        console.log('endTime')
        console.log(endTime)
        if (endTime !== '') {
            $(this).datetimepicker('setEndDate', endTime);
        } else {
            $(this).datetimepicker('setEndDate', null);
        }
    });

    $('#end_datetime').datetimepicker(dateOptions).on('show', function () {
        const startTime = $('#start_datetime_input').val();
        if (startTime !== '') {
            $(this).datetimepicker('setStartDate', startTime);
        } else {
            $(this).datetimepicker('setStartDate', null);
        }
    });

  效果如下:先选择开始日期,再选择结束日期时,会发现前边的日期都变为灰色,不能选中

猜你喜欢

转载自www.cnblogs.com/wangjiale1024/p/9806207.html
今日推荐