修改链接的datetimepicker minDate maxDate函数

Question

I have implemented a pair of linked datetimepickers . The min and maxDate function works fine, but I want to modify it so that even if a user picks in one input a date that is off limit, the other input will not prevent the user from doing so but renew the min or maxDate accordingly. (For instance, if a user picked '10am' and '2pm' and s/he changed to '3pm', the second field will change to say, 4pm.) I'm not sure how I can do that?

The 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>

The 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);
    });
});

EDITED:

I tried something but it doesn't seem relevant:

$(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

Here is the working code.

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);
    });
});

Note : Here as per your need i modified my code , but i am unable to set mindate on second datetimepicker when the first picker is changed so i am just clearing mindate on second picker. you better give it a try .

Answer 2

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