Datepicker: adding dateFormat gives an error

Question

I am testing daterange selection using this example: http://salman-w.blogspot.no/2013/01/jquery-ui-datepicker-examples.html#example-7

I want to change the dateFormat, but an addition that gives the following error in the console: "Unexpected unexpected literal at position 2"

I add one line (3rd line) for dateFormat as follows:

$(function() { $("#datepicker").datepicker({ dateFormat: "yy-mm-dd", beforeShowDay: function(date) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""]; }, onSelect: function(dateText, inst) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); if (!date1 || date2) { $("#input1").val(dateText); $("#input2").val(""); $(this).datepicker("option", "minDate", dateText); } else { $("#input2").val(dateText); $(this).datepicker("option", "minDate", null); } } }); }); 

Or look at the jsfiddle example for an example error: http://jsfiddle.net/jaaqs/

So, how can I change the dateFormat for this example datepicker range?

Answer 1

Use the default settings for your format.

 $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd' }); 

Now your dates show the correct format (i.e. 2013-06-12)

Updated JSFiddle here: http://jsfiddle.net/jaaqs/3/

Answer 2

The date format you specify for datepicker ( yy-mm-dd ) is different from the default date format ( mm/dd/yy ). In your code, the user interface tries to 2013-01-01 as mm/dd/yy , which does not parse (the function is discarded when it sees 1 instead of / ).

Possible fixes:

a. Explicitly using the same date format that you specified in the datepicker options:

 $("#datepicker").datepicker({ dateFormat: "yy-mm-dd", beforeShowDay: function (date) { var date1 = $.datepicker.parseDate("yy-mm-dd", $("#input1").val()); var date2 = $.datepicker.parseDate("yy-mm-dd", $("#input2").val()); // ... 

B. Capture date Format on demand:

 $("#datepicker").datepicker({ beforeShowDay: function (date) { var date1 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#input1").val()); var date2 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#input2").val()); // ... 

In the above example, $(this).datepicker("option", "dateFormat") will return the date format used by the current datepicker parameter (explicitly specified or inherited from the default datepicker values).

Answer 3

I'm not sure why, but moving formatting from a large initialization block works.

http://jsfiddle.net/jaaqs/2/

 $(function() { $("#datePicker").datepicker({dateFormat: "mm-dd-yy"}); $("#datepicker").datepicker({ beforeShowDay: function(date) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""]; }, onSelect: function(dateText, inst) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val()); if (!date1 || date2) { $("#input1").val(dateText); $("#input2").val(""); $(this).datepicker("option", "minDate", dateText); } else { $("#input2").val(dateText); $(this).datepicker("option", "minDate", null); } } }); }); 

Answer 4

Your date format was a problem

 $(function() { $("#datepicker").datepicker({ dateFormat: "yy-mm-dd", beforeShowDay: function(date) { var date1 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#input1").val()); var date2 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#input2").val()); return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""]; }, onSelect: function(dateText, inst) { var date1 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#input1").val()); var date2 = $.datepicker.parseDate($(this).datepicker("option", "dateFormat"), $("#input2").val()); if (!date1 || date2) { $("#input1").val(dateText); $("#input2").val(""); $(this).datepicker("option", "minDate", dateText); } else { $("#input2").val(dateText); $(this).datepicker("option", "minDate", null); } } }); }); 

Demo: Fiddle

Answer 5

You can also change the date formatting setting in the JS datepicker file

on line 26

Do you have that

  this.format = DPGlobal.parseFormat(options.format||this.element.data('date-format')||'mm/dd/yyyy'); 

You can change it to whatever you want, for example GMT (date setting in the UK)

  this.format = DPGlobal.parseFormat(options.format||this.element.data('date-format')||'dd/mm/yyyy'); 

This is a global change, however