jQuery DatePicker d/m/yy 格式

Question

处理一个问题，但 dateFormat 的格式没有像它想象的那样工作。任何人都可以看到任何突出的东西吗？如果我将日期更改为其他格式，它会起作用

var check_in = [["25/11/2021", "28/11/2021"]];

if ($(window).width() > 700) {
    $('#arrival, #contact-arrival').datepicker({
        minDate: '0M',
        numberOfMonths: 2,
        beforeShowDay: function(date) {
            var string = jQuery.datepicker.formatDate('d/m/yy', date);
            for (var i = 0; i < check_in.length; i++) {
              if (Array.isArray(check_in[i])) {
                var from = new Date(check_in[i][0]);
                var to = new Date(check_in[i][1]);
                var current = new Date(string);
                if (current >= from && current <= to) return false;
              }
            }
            return [check_in.indexOf(string) == -1]
          },
        dateFormat: 'dd M yy',
        onSelect: function (dateText, inst) {
            $('#departure, #contact-departure').datepicker("option", "minDate", dateText);
        }
    });

在上述脚本中，jQuery.datepicker.formatDate('d/m/yy', date); 无法识别 var check_in = [["25/11/2021", "28/11/2021"]];

如果我将代码更改为var string = jQuery.datepicker.formatDate('d/M/yy', date); 以及数组的格式为var check_in = [["25/Nov/2021", "28/Nov/2021"]]; 一切正常，但正在以第一种格式提取数据 2021 年 1 月 1 日

希望有一双新眼睛的人能看到我做错了什么。

非常感谢。

Answer 1

问题是您试图将Date() 与它无法识别的字符串一起使用。 Date() accepts strings 像 2011-10-10，但不是 25/11/2021。我通过一些简单的console.log()ing 确认了这一点，它显示了很多Invalid date 错误。

因此，您的 from 和 to 变量永远不会被设置，并且针对它们的测试不起作用。问题根本不在于jQuery.datepicker.formatDate()（问题中的这个措辞让我很困惑，我花了一些时间来理解你的意思）。

首先，我们需要以某种方式从这些字符串中生成日期。在 SO (here's one) 上有很多关于如何将字符串解析为 JS 日期的示例，但 jQueryUI 的 Datepicker 内置了一个方便的实用程序：$.datepicker.parseDate。我们可以使用它来正确设置您的变量：

var from = $.datepicker.parseDate('dd/mm/yy', check_in[i][0]);
var to   = $.datepicker.parseDate('dd/mm/yy', check_in[i][1]);

我这样做并重新运行了您的代码，但仍然收到Invalid date 错误，特别是设置current 的行。这会遇到完全相同的问题 - string 的格式是 Date 无法理解的。

但在修复该问题之前，请退后一步 - 代码将日期对象 beforeShowDay() 获取为参数 (date)，将其转换为字符串 (string)，然后将该字符串转换回日期（current），并使用它与其他日期对象（from，to）进行比较。如果我们从日期开始，并想将其与日期进行比较，则无需进行所有转换。我们可以完全摆脱string，只使用date。

最后一个问题——string 仍然在最后一个测试中使用：

return [check_in.indexOf(string) == -1]

我们不能在这里只使用date 代替string，因为它是一个日期对象，而check_in 元素是字符串。所以我们确实需要将date 转换为字符串来进行比较。

但再次退后一步，如果我正确理解了您的代码，则此测试是多余的。上面的代码已经检查了check_in 范围内的日期，并阻止了它们。其他一切都应该被允许，对吧？所以我们可以在这里简单地return [true];？

这是一个简化的、有效的 sn-p，应用了所有这些修复。点击运行查看它的运行情况。

var check_in = [
  ["25/11/2021", "28/11/2021"]
];

$('#arrival').datepicker({
  minDate: '0M',
  numberOfMonths: 2,
  beforeShowDay: function(date) {

    for (var i = 0; i < check_in.length; i++) {
      if (Array.isArray(check_in[i])) {

        var from = $.datepicker.parseDate('dd/mm/yy', check_in[i][0]);
        var to = $.datepicker.parseDate('dd/mm/yy', check_in[i][1]);

        console.log(date, from, to);
        if (date >= from && date <= to) return [false];
      }
    }
    return [true];
  },
  dateFormat: 'dd M yy',
});

<link href="https://code.jquery.com/ui/1.13.0-alpha.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="arrival"></div>