修改链接datetimepicker minDate maxDate函数

Modifying linked datetimepicker minDate maxDate function

本文关键字：maxDate 函数 minDate datetimepicker 链接 修改      更新时间：2023-09-26

我已经实现了一对链接的日期时间选择器。min和maxDate函数工作得很好，但是我想修改它，以便即使用户在一个输入中选择了一个关闭限制的日期，另一个输入也不会阻止用户这样做，而是相应地更新min或maxDate。(例如，如果用户选择了"上午10点"answers"下午2点"，而他/她选择了"下午3点"，那么第二个字段将改为"下午4点"。)我不知道该怎么做。

pickers 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();

下面是工作代码。

更新演示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);
    });
});

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

这里已经给出了关于StackOverFlow的问题，显示了如何动态更改选项。

相关文章：