Setting 'option' on jqueryui DatePicker clears the textbox's value?

Question

I've highlighted the example here:

http://jsfiddle.net/aDxeE/

Basically, a separate event (not known at construction) needs to set "option","maxDate" on the datepicker control. This 'clears' the textbox value which is really annoying, as the initial construction does not.

Can anyone offer a solution?

Edit:

Changing line 5 to:

$("#myinput").datepicker("destroy");
$("#myinput").datepicker({minDate:new Date(), maxDate: new Date()});

makes it work as expected, but is a seriously messy approach.

Answer 1

It's an issue with the format. Your initial value dd-mm-yyyy doesn't match the datepickers default format. To resolve, set the initial value to the correct format and specify the format as dateFormat when creating the datepicker.

Fiddle

Change to:

<input id="myinput" type="text" value="01-01-1970" />

And:

//construct datepicker
$("#myinput").datepicker({minDate:new Date(), dateFormat : "dd-mm-yy"});
//later on, a seperate event changes the maxDate property
//but this 'clears' the existing value in the textbox!
$("#myinput").datepicker("option","maxDate", new Date());

Answer 2

You could do this:

$("#myinput").datepicker('destroy').datepicker({maxDate:new Date()});

• Removes the datepicker functionality completely. This will return the element back to its pre-init state.
• Again re-initiate the datepicker with setting the maxdate option.

FIDDLE DEMO

UPDATE

Formated the code for the readability purpose:-

$("#myinput").datepicker("destroy");

$("#myinput").datepicker({
    minDate: new Date(),
    maxDate: new Date()
});

Answer 3

Try to give it in $(document).ready(function(){..});

//construct datepicker
$(document).ready(function(){
$("#myinput").datepicker({minDate:new Date()});
//later on, a seperate event changes the maxDate property
//but this 'clears' the existing value in the textbox!
});
$("#myinput").datepicker("option","maxDate", new Date());

Check JSFiddle .

FYI: use placeholder instead of value placeholder="dd-mm-yyyy"

Answer 4

How about manually setting it back again?

var d = $("#myinput").val();
$("#myinput").datepicker("option", "maxDate", "+2d").val(d);

Answer 5

This question was already answered here : https://stackoverflow.com/a/8945264/2050459

You need to set the date first trough code(using setDate) or by opening the datepicker(user interaction).

Here is how you would do it with code : fiddle

$("#myinput").datepicker({
    minDate: new Date()
});
$("#myinput").datepicker("setDate", new Date());

In your example, try opening the datepicker and then trigger an event to set a maxDate, you'll see that the input will not be cleared because an active date has been set.

Answer 6

Jqueryui DatePicker clears the textbox's value?

myinput = ID of datapicker

$("#myinput").val('');