Datepicker: Adding dateFormat is giving an error

Question

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

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

I add one line (3rd line) for dateFormat like this:

 $(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 see jsfiddle for a example of the error: http://jsfiddle.net/jaaqs/

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

Answer 1

You can also change the date formatting setting within the JS file of datepicker

on line 26

you have this

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

You can change it to anything you want, for instance GMT (UK Date Setting)

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

This is a global change however

Answer 2

The date format you have specified for the datepicker (yy-mm-dd) is different from the default date format (mm/dd/yy). In your code, the UI tries to parse 2013-01-01 as mm/dd/yy which does not parse (the function gives up when it sees a 1 instead of /).

The possible fixes are:

A. Explicitly use the same date format that you specified in 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. Grab the dateFormat 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 (whether explicitly specified or inherited from datepicker defaults).

Answer 3

Your date format was the 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 4

Use set Defaults for your format.

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

Now your dates shows the right format (i.e. 2013-06-12)

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

Answer 5

I'm not sure why, but moving the formatting out of the big 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);
      }
    }
  });

});