Bootstrap 初始化问题上的日期时间选择器范围

Question

有时我的表格带有预编译日期（在这些示例中：06/02/2019）。

<div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" value="06/02/2019"/>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
<div class='input-group date' id='datetimepicker2'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

我遇到 bootstrap datetimepicker 的问题：当页面加载时值已经存在时，"blocking" 函数不起作用：

$('#datetimepicker1').datetimepicker({
    format: 'DD/MM/YYYY'
});

$('#datetimepicker2').datetimepicker({
    format: 'DD/MM/YYYY',
    useCurrent: false //Important! See issue #1075
});

$("#datetimepicker1").on("dp.change", function (e) {
    $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});      

$("#datetimepicker2").on("dp.change", function (e) {
    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date); //<-- it works only when I change date.
});

首次加载页面后，当我尝试选择 datetimepicker2 上的日期时，我想屏蔽 2019 年 6 月 2 日之前的日期，但所有日期都可用！仅当我更改输入字段时它才有效。

看我的fiddle：https://jsfiddle.net/omerts/8jpmkcr5/1/

Answer 1

根据 Bootstrap Datetime Picker，您需要在初始化日期时间选择器时使用 minDate 和 maxDate。

$(function () {    
         var datetime1 = $('#datetime1').val() != "" ? new Date($('#datetime1').val()) : false;
         var datetime2 = $('#datetime2').val() != "" ? new Date($('#datetime2').val()) : false;
                $('#datetimepicker1').datetimepicker({
                maxDate: datetime2
                });
                
                $('#datetimepicker2').datetimepicker({
                  useCurrent: false, //Important! See issue #1075
                  minDate: datetime1
                });
                
                $("#datetimepicker1").on("dp.change", function (e) {
                  $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
                });      
                
                $("#datetimepicker2").on("dp.change", function (e) {
                    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
                });
            });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" id="datetime1" value="02/05/2019" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" id="datetime2"  />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap 初始化问题上的日期时间选择器范围

Bootstrap Datetimepicker range on init issue

javascript

datetimepicker

eonasdan-datetimepicker