0

I have a simple html form with 3 inputs

<input id="dateBegin" type="text"  placeholder="Begin">

<input id="dateEnd" type="text" placeholder="End">

<input id="datePrice" type="text"  placeholder="Ex. : 220.00">

On the first two, I've added a datepicker

$("#dateBegin").datepicker({ dateFormat: 'yy-mm-dd', minDate: 'now' });
$("#dateEnd").datepicker({ dateFormat: 'yy-mm-dd', minDate: 'now' });

Now, in order to create a smooth user experience, I want to select the next input in the form after one input is filled. Specifically it means :

  1. [The user click inside the first input (dateBegin)] -> the datepicker is displayed.
  2. [The user select a date with the datepicker] -> dateBegin is filled with the date value, the datepicker linked to dateBegin is hidden, the next input (dateEnd) is focused and its datepicker is shown.
  3. [The user select a date with the second datepicker] -> dateEnd is filled with the date value, the datepicker linked to dateEnd is hidden, the next input (datePrice) is focused.

In order to have this behaviour, I've added this code to my page

$('#dateEnd').change(function(){
    $("#datePrice").focus();

});
$('#dateBegin').change(function(){
    $("#dateEnd").focus();
    $("#dateEnd").datepicker("show"); // This line can be removed it doesn't change anything but I've tried it :p
});

My problem is at step 2). The datepicker linked to dateEnd appear briefly before disappearing. It may not be clear so here is a JSFiddle reproducing it.

I can't figure out why the datepicker linked to dateEnd disappear ? But, more importantly, how could I achieve the desired behaviour ?

1 Answer 1

3

Try this

$('#dateBegin').change(function(){
    setTimeout(function (){
            $("#dateEnd").focus();
        }, 1);
});

I think what is happening is that after setting focus to the next text box the calendar still thinks it needs to close. by delaying the focus change you change focus after the jQuery UI has responded to the click.

1
  • It works, I can only accept your answer in five minutes. Oct 5, 2015 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.