Modifying linked datetimepicker minDate maxDate function

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

[here it is](https://jsfiddle.net/2L788837/) but it is not working I don't know why.. I uploaded everything it's asked [here](https://eonasdan.github.io/bootstrap-datetimepicker/Installing/#minimal-requirements) — Alvin Mok, Aug 29 '15 at 16:58
it doesn't work because files from github cannot be external sources? — Alvin Mok, Aug 29 '15 at 17:05
[Here](https://jsfiddle.net/SantoshPandu/w2qd3oqy/) is the working fiddle , but it working only for dates not `time`. — J Santosh, Aug 29 '15 at 17:58
I don't even see the linked pickers working on this plugin's site: https://eonasdan.github.io/bootstrap-datetimepicker/#linked_pickers — hoffmanc, Aug 29 '15 at 18:04
@JSantosh both dates and time in your fiddle are working from my browser.. what gives? Thanks so much btw! — Alvin Mok, Aug 29 '15 at 18:13

J Santosh · Accepted Answer · 2015-08-29T20:06:54.983

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 .

I'm afraid that my question is that I want to modify the code. Now if a user has already set a min and maxDate, s/he will not be allowed to change the minDate to exceed the maxDate, only if the maxDate is postponed. I hope to modify the codes so when the user updates a minDate that exceeds the maxDate, maxDate is automatically pushed forward. For instance, if the user has already selected 'from 3pm to 4pm', if s/he changes to 'from 5pm', the function would allow the change and push 'to 4pm' to like '6pm'. Not sure I explain it right. — Alvin Mok, Aug 29 '15 at 18:26
Thank you very much @JSantosh. At last I simply removed min and maxDate and did [this](https://jsfiddle.net/cv8fwxnk/9/). Your advice helped a lot. Thanks again. Oh and as you can see my codes are very repetitive and messy.. any suggestion on how to polish it? — Alvin Mok, Aug 30 '15 at 08:48
glad to help :). to clean your code just have look on [jQuery Docs](https://api.jquery.com/) on how can we use selectors etc . — J Santosh, Aug 30 '15 at 10:11

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

here is already given asked question on StackOverFlow that shows how to change options dynamically.

edited May 23 '17 at 11:52

Community

1
1

answered Aug 29 '15 at 15:57

Muhammad Usman

1,366
5
18
33

Thanks but, I'm not sure how exactly I can go about it with the solution from that post. Can you see my updated codes in the post (edited) and advise where I went wrong? – Alvin Mok Aug 29 '15 at 16:25

Modifying linked datetimepicker minDate maxDate function

2 Answers2