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问题：当页面加载中的值已经存在时，“阻止”功能不起作用：

$('#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日之前的日期，但是所有日期都可用！仅当我在输入字段中进行更改时，它才起作用。

看我的小提琴：https://jsfiddle.net/omerts/8jpmkcr5/1/

Answer 1

根据Bootstrap Datetime Picker，您需要在初始化Datetime选择器时使用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 Datetimepicker范围

1 个答案: