修改链接的 datetimepicker minDate maxDate 函数

Question

我已经实现了一对链接的datetimepickers。 min 和 maxDate 函数工作正常，但我想对其进行修改，以便即使用户在一个输入中选择一个超出限制的日期，另一个输入也不会阻止用户这样做，而是相应地更新 min 或 maxDate。 （例如，如果用户选择了“上午 10 点”和“下午 2 点”并且他/她更改为“下午 3 点”，则第二个字段将更改为下午 4 点。）我不确定我该怎么做？

选择器 html：

<div class='col-lg-6'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker6'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div class='col-lg-6'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker7'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

js:

$(function () {
    $('#datetimepicker6').datetimepicker();
    $('#datetimepicker7').datetimepicker({
        //useCurrent: false //Important! See issue #1075
        //btw, it is suggested to set useCurrent to false but the picker is not working when it's set to false so I didn't..
    });
    $("#datetimepicker6").on("dp.change", function (e) {
        $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
    });
    $("#datetimepicker7").on("dp.change", function (e) {
        $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
    });
});

已编辑：

我尝试了一些东西，但似乎不相关：

$(function () {
    $('#datetimepicker1').datetimepicker({
        format: 'LT'
    });
    $('#datetimepicker2').datetimepicker({
    //useCurrent: false //Important! See issue #1075
        format: 'LT'
    });
    //$("#datetimepicker1").on("dp.change", function (e) {
    //    $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
    //});
    //$("#datetimepicker2").on("dp.change", function (e) {
    //    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
    //});
});
$('#datetimepicker1').datetimepicker({
    //minDate: 0, // to disable past dates (skip if not needed)
    onClose: function(selectedDate) {
    // Set the minDate of 'to' as the selectedDate of 'from'
        $('#datetimepicker2').data("DateTimePicker").minDate(selectedDate);                                       
    }
});
$('#datetimepicker2').datetimepicker();

Answer 1

这是工作代码。

Updated Demo

HTML

<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker6'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker7'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

JS

var timeDiff;
$(function () {
    $('#datetimepicker6').datetimepicker();
    $('#datetimepicker7').datetimepicker({
        useCurrent: false //Important! See issue #1075
    });
    $("#datetimepicker6").on("dp.change", function (e) {
         if (timeDiff) {
        $('#datetimepicker7').data("DateTimePicker").date(e.date.add(timeDiff, 's'));    
        $('#datetimepicker7').data("DateTimePicker").minDate(false);
    } else $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
    });
    $("#datetimepicker7").on("dp.change", function (e) {    
        var CurrStartDate = new Date($('#datetimepicker6').data("DateTimePicker").date());
        var CurrEndDate = new Date($('#datetimepicker7').data("DateTimePicker").date());
        if (CurrEndDate) {
            timeDiff = (CurrEndDate - CurrStartDate) / 1000;
        }
        $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
    });
});

注意：这里根据您的需要修改了我的代码，但是当第一个选择器更改时，我无法在第二个 datetimepicker 上设置 mindate，所以我只是在第二个时清除 mindate选择器。你最好试一试。

Answer 2

这里已经在StackOverFlow 上提出了问题，该问题显示了如何动态更改选项。