Datepicker：添加 dateFormat 会出错答案

【问题标题】：Datepicker: Adding dateFormat is giving an errorDatepicker：添加 dateFormat 会出错
【发布时间】：2013-06-07 00:47:49
【问题描述】：

我正在使用以下示例测试选择日期范围： 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 的 dateFormat？

【问题讨论】：

标签： jquery datepicker

【解决方案1】：

为您的格式使用设置默认值。

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

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

在这里更新了 JSFiddle：http://jsfiddle.net/jaaqs/3/

【讨论】：

别担心，Arun 的回答也有效。这取决于你想如何实现它。
如何仅使用 javascript 来执行此操作。我没有使用 datepicker

【解决方案2】：

您为日期选择器指定的日期格式 (yy-mm-dd) 与默认日期格式 (mm/dd/yy) 不同。在您的代码中，UI 尝试将 2013-01-01 解析为无法解析的 mm/dd/yy（该函数在看到 1 而不是 / 时放弃）。

可能的修复方法是：

A.明确使用您在日期选择器选项中指定的相同日期格式：

$("#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.按需获取 dateFormat：

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

在上面的示例中，$(this).datepicker("option", "dateFormat") 将返回当前日期选择器使用的日期格式（无论是明确指定还是继承自日期选择器默认值）。

【讨论】：

真的是一个很好解释的答案:) +1

【解决方案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

【讨论】：

也在做这个。现在我更好地理解了我的问题的原因。谢谢！

【解决方案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);
      }
    }
  });

});

【讨论】：

你知道'yy'是4位数的年份，对吧？哦，我在 dateFormat 字符串中输入了错误的格式，这就是原因

【解决方案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');

这是一个全球性的变化

【讨论】：