Question

我已经实现了一对链接的datetimepickers。 min和maxDate函数工作正常，但我想修改它，以便即使用户在一个输入中选择一个非限制日期，另一个输入也不会阻止用户这样做，但相应地更新min或maxDate。（例如，如果用户选择了'上午10点＆＃39;以及＆＃39;下午2点＆＃39;并且他/她更改为＆＃39;下午3点## 39;，则第二个字段将更改为下午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，所以我只是清除{{1在第二个选择器上。你最好试一试。

Answer 2

此处已经在StackOverFlow上提出了问题，其中显示了如何动态更改选项。

修改链接的datetimepicker minDate maxDate函数

2 个答案: