jQuery 日期选择器 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"]]; 一切正常，但正在以第一种格式提取数据 1/1/2021

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

非常感谢。

Answer 1

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

因此您的 from 和 to 变量从未设置，并且针对它们的测试不起作用。问题根本不在 jQuery.datepicker.formatDate() 上（问题中的这个措辞让我感到困惑，需要一些修改才能理解你的意思）。

所以首先，我们需要以某种方式从这些字符串中生成日期。在 SO 上有很多关于如何将字符串解析为 JS 日期的示例（here's one), but jQueryUI's Datepicker has a handy utility for that built in: $.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，因为它是一个 Date 对象，而 check_in 元素是字符串。所以我们确实需要将 date 转换为字符串以进行比较。

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

这是应用了所有这些修复程序的简化的工作代码段。单击运行查看实际效果。

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>

jQuery 日期选择器 d/m/yy 格式

jQuery DatePicker d/m/yy format

jquery

jquery-ui-datepicker