JQuery datetimepicker change min/maxDate results in infinite loop

Question

I'm using the datetimepicker from http://trentrichardson.com/examples/timepicker/

The problem is that I've got an start and end input field. I don't want that an user can pick an end datetime that is later then the start date field.

The input fields looks like this:

<input type="text" name="dateStart" id="dateStart" value="<?php echo $pageInfo['page_date_start'];?>" onChange="dateStartChange();" />
<input type="text" name="dateEnd" id="dateEnd" value="<?php echo $pageInfo['page_date_end'];?>" onChange="dateEndChange();" />
// Default date value = 0000-00-00 00:00:00

The JScript that setups the datetimepicker:

$('#dateStart').datetimepicker({
    showSecond: false,
    timeFormat: 'HH:mm:ss',
    dateFormat: "yy-mm-dd",
});

$('#dateEnd').datetimepicker({
    showSecond: false,
    timeFormat: 'HH:mm:ss',
    dateFormat: "yy-mm-dd",
});

And the onchange functions:

function dateStartChange(){
    console.log("dateStartChange: " + $("#dateStart").val());
    $("#dateEnd").datepicker('option', 'minDate', $("#dateStart").val()); 
}

function dateEndChange(){
    console.log("dateEndChange: " + $("#dateEnd").val());
    $("#dateStart").datepicker('option', 'maxDate', $("#dateEnd").val()); 
}

This works great except for one thing. If I change the date, and then click on the other input field and SELECT the same day, it results in an infinite loop if I check my console log: Console output...

And the page (chrome) changes to this: Page outcome

Is it a problem with the datetime picker or am I doing something wrong? I don't get it.

Steve Wellens · Accepted Answer · 2013-04-21T15:03:00.923

1

It is probably recursion....

When dateStart changes, you are modifying dateEnd.
When dateEnd changes, you are modifying dateStart.
When dateStart changes, you are modifying dateEnd.
When dateEnd changes, you are modifying dateStart.
When dateStart changes, you are modifying dateEnd.
When dateEnd changes, you are modifying dateStart.
When dateStart changes, you are modifying dateEnd.
When dateEnd changes, you are modifying dateStart.

etc., etc., etc.

[Edit suggested work around, apply to both event handlers]

var bCodeChange = false;

function dateStartChange()
{
    if (bCodeChange == true)
        return;
    else
        bCodeChange = true;

    console.log("dateStartChange: " + $("#dateStart").val());
    $("#dateEnd").datepicker('option', 'minDate', $("#dateStart").val());

    bCodeChange = false;
}

edited Apr 21 '13 at 15:03

answered Apr 21 '13 at 14:54

Steve Wellens

20,160
2
24
64

Now your saying it, it becomes clear :D 1 Question then, how do you think that i can prevent recursion with this then? – Mathlight Apr 21 '13 at 14:56
I've fixed problems like this before by using a boolean flag. Something like bCodeChange. When you are about to modify another control, set it to true, when done, set it to false. Then in the control, if bCodeChange is true, just exit, don't do anything. However, I find this kind of kludgy. – Steve Wellens Apr 21 '13 at 14:59
Sounds ugly indeed, but i don't think that would work. Because if i just click 1 time on an date, the console returns 3 times the function console log ( http://i.imgur.com/0ydySEx.jpg ) – Mathlight Apr 21 '13 at 15:11
Never Mind, didn't saw your edit. That did the trick, i thank you so verry verry much for your help :P – Mathlight Apr 21 '13 at 15:14

JQuery datetimepicker change min/maxDate results in infinite loop

1 Answers1