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

Question

I've highlighted the example here:

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.

@AtifMohammedAmeenuddin I'm using firefox...you're telling me when that page loads the textbox value is still 'dd-mm-yyyy'? — maxp, Jun 25 '13 at 08:26

score 2 · Accepted Answer · answered Jun 25 '13 at 08:33

2

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

answered Jun 25 '13 at 08:33

MrCode

63,975
10
90
112

The value set to 'dd-mm-yyyy' is just an example of default text, it might as well say 'hello world'. Same problem is exhibited. See http://jsfiddle.net/aDxeE/7/ – maxp Jun 25 '13 at 08:35
When you update the maxDate option, the current value is evaulated to see if it meets the min and max requirements, it isn't a valid date and so is removed. For default options that aren't valid dates you can use a `placeholder="dd-mm-yyyy"` attribute, or put a label next to it. – MrCode Jun 25 '13 at 08:38
I did not know about the `placeholder` attribute, completely new to me! Thanks! – maxp Jun 25 '13 at 08:42

palaѕн · Answer 2 · 2013-06-25T08:42:07.467

1

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

edited Jun 25 '13 at 08:42

answered Jun 25 '13 at 08:33

palaѕн

72,112
17
116
136

This is the only example that works, and as per my edit is a bit messy looking! – maxp Jun 25 '13 at 08:37
I like this example, and I wouldve marked it as the answer, especially for the sake of backwards compatability, if it wasnt for the html 5 'placeholder' attribute. – maxp Jun 25 '13 at 08:44

score 0 · Answer 3 · answered Jun 25 '13 at 08:30

0

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"

answered Jun 25 '13 at 08:30

Praveen

55,303
33
133
164

That doesnt work - you realise line 7 doesnt do anything as it's called before line 3 – maxp Jun 25 '13 at 08:32

score 0 · Answer 4 · answered Jun 25 '13 at 08:30

0

How about manually setting it back again?

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

answered Jun 25 '13 at 08:30

Atif

10,623
20
63
96

score 0 · Answer 5 · edited May 23 '17 at 10:33

0

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.

edited May 23 '17 at 10:33

Community

1
1

answered Jun 25 '13 at 09:14

rusln

1,284
8
10

You seem to have misunderstood the question. – maxp Jun 25 '13 at 09:19
The reason that your input is being cleared is because no date is being set. I'm actually explaining you the reason behind your problem. I've just show you how to solve the problem using the datepicker api without using any hacks. – rusln Jun 25 '13 at 09:28

score -1 · Answer 6 · edited Sep 09 '16 at 07:32

-1

Jqueryui DatePicker clears the textbox's value?

myinput = ID of datapicker

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

edited Sep 09 '16 at 07:32

Tarod

6,732
5
44
50

answered Sep 08 '16 at 16:54

Sanjay Rathore

91
1
1

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

6 Answers6

Linked