jquery ui datepicker setdate only works on google chrome

Question

My code:

<input type="text" id="testdate" name="testdate" value="2017-01-01" />

<script>
$('#testdate').datepicker();
$('#testdate').datepicker('option', 'dateFormat', 'yy-mm-dd');
$("#testdate").datepicker('setDate', new Date('2017-01-01 12:00:00'));
</script>

JS Fiddle: https://jsfiddle.net/g0uyok13/

In Google Chrome it shows 2017-01-01 in the text input area. In Firefox it shows today's date (atm 2016-02-24). I'd like it to work in Firefox the same way as it works in Google Chrome.

Any ideas?

Shouldn't line 5 read `$('#testdate').datepicker('option', 'dateFormat', 'yyyy-mm-dd');`? — m-albert, Feb 24 '16 at 22:50

score 2 · Accepted Answer · edited May 23 '17 at 12:31

The problem lies in the time 12:00:00 . Dont forget that it is a datepicker you are using. Time has nothing to do with it.

Now the reason it works in chrome, i guess it is internal implementation of the browser. Mozilla discards the invalid date format while chrome tries and cuts it down...(This is purely my assumption, i dont base it on any documentation...yet)

UPDATE

Yes my assumption was right. Firefox doesnt support the date format you have entered while chrome is more flexible and does support it. For universal date and time you can use this code:

$('#testdate').datepicker();
$('#testdate').datepicker('option', 'dateFormat', 'yy-mm-dd');
$("#testdate").datepicker('setDate', new Date('2017-01-01T12:00:00Z'));

(Works in both browsers)

You can see also new Date() works differently in Chrome and Firefox for more info on this

score 1 · Answer 2 · answered Feb 24 '16 at 22:58

You can try to change the format of your date string to be in format:

$("#testdate").datepicker('setDate', new Date('2017-01-01T12:00:00'));

Firefox doesn't know how to parse the date with a space

Here is an extract from MDN

dateString

String value representing a date. The string should be in a format recognized by the Date.parse() method (IETF-compliant RFC 2822 timestamps and also a version of ISO8601).

You can see more info at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

score 0 · Answer 3 · edited May 23 '17 at 12:23

Your date is invalid in firefox...try this:

$('#testdate').datepicker();
$('#testdate').datepicker('option', 'dateFormat', 'yy-mm-dd');
$("#testdate").datepicker('setDate', new Date(2017, 00, 01, 12, 0, 0, 0));

NOTE: Months are 0 based so 0 is January 1 is February etc...

That should work in firefox and chrome. I took the date format from this stackoverflow post: link

Try this in firefox:

console.log(new Date('2017-01-01 12:00:00'));

Check your console it should show:

Invalid Date

working fiddle

jquery ui datepicker setdate only works on google chrome

3 Answers3