Datepicker：添加dateFormat会出错

Question

我正在测试使用此示例选择日期范围： http://salman-w.blogspot.no/2013/01/jquery-ui-datepicker-examples.html#example-7

我想更改dateFormat，但添加它会在控制台中出现以下错误： “在第2位没有意外的文字”

我为dateFormat添加一行（第3行），如下所示：

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

或者请参阅jsfiddle以获取错误示例： http://jsfiddle.net/jaaqs/

那么，如何更改此datepicker-range-example的日期格式？

Answer 1

使用set Defaults作为格式。

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

现在您的日期显示正确的格式（即2013-06-12）

在此处更新了JSFiddle：http://jsfiddle.net/jaaqs/3/

Answer 2

您为datepicker（yy-mm-dd）指定的日期格式与默认日期格式（mm/dd/yy）不同。在您的代码中，用户界面会尝试将2013-01-01解析为mm/dd/yy，而1不会解析（当函数看到/而不是$("#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()); // ... 时，函数会放弃）。

可能的修复方法是：

一个。明确使用您在datepicker选项中指定的相同日期格式：

$("#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());
        // ...

B中。按需获取dateFormat：

$(this).datepicker("option", "dateFormat")

在上面的示例中，{{1}}将返回当前datepicker使用的日期格式（无论是显式指定还是从datepicker默认值继承）。

Answer 3

您的日期格式是问题

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

演示：Fiddle

Answer 4

我不知道为什么，但是将格式化从大型初始化块中移除是有效的。

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 5

您还可以在datepicker的JS文件中更改日期格式设置

第26行

你有这个

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

您可以将其更改为您想要的任何内容，例如GMT（英国日期设置）

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

这是一个全球性的变化