jQuery日期选择器开始日期间隔未显示。

Question

我使用jQuery datepicker来展示用户可用日期，并希望禁用并标记为红色的忙碌日期。我使用了datepicker选项中的beforeShowDay：

beforeShowDay: function(date) {
            var cssClass = '';

            for (var i=0; i < busyStarts.length; i++) {
                var busyStart = new Date(busyStarts[i]);
                var busyEnd = new Date(busyEnds[i]);
                if (date >= busyStart && date <= busyEnd) {
                    cssClass = 'ui-state-disabled busy_date';
                }
            }

            return [true, cssClass];
        }

busyStarts 和 busyEnds 变量是：

但是我看到的结果是：

为什么时间间隔的前几天没有被选中？因为我有条件date >= busyStart

当我查看调试器时：

这就是为什么等于 (=) 条件无法工作。开始和结束日期带有时间 03:00:00，但日期带有 00:00:00，在相同的日期下, 因为 00:00:00 < 03:00:00，所以date <=。

现在我问，为什么？如何正确解决这个问题？

- Dmytro Zarezenko

---

如果您使用调试器并在该表达式上中断，那么您的CSS字符串是否会在9-24 -> 9-30范围内获得一个值？ - Jaime Torres

在调试器中看到一个有趣的情况: busyEnd日期为{Fri Aug 31 2012 03:00:00 GMT+0300}，而busyStart日期为{Fri Aug 10 2012 03:00:00 GMT+0300}。但是另外还有一个日期{Sat Aug 11 2012 00:00:00 GMT+0300}。 - Dmytro Zarezenko

为什么开始和结束日期是03:00:00？:) 而日期是00:00:00。这就是为什么=条件不起作用的原因。 - Dmytro Zarezenko

Answer 1

已解决

我修改了我的代码。在开始和结束日期初始化时添加了setHours(0, 0, 0, 0)。

beforeShowDay: function(date) {
            var cssClass = '';

            for (var i=0; i < busyStarts.length; i++) {
                var busyStart = new Date(busyStarts[i]).setHours(0, 0, 0, 0);
                var busyEnd = new Date(busyEnds[i]).setHours(0, 0, 0, 0);
                if (date >= busyStart && date <= busyEnd) {
                    cssClass = 'ui-state-disabled busy_date';
                }
            }

            return [true, cssClass];
        }

- Dmytro Zarezenko

---

感谢您提交该解决方案！我正在积极开发使用DatePicker，如果我遇到您的情况，知道首先查找哪里将是很好的！ - Jaime Torres

Answer 2

尝试这个语句：

beforeShowDay: function(date) {
        var cssClass = '';

        for (var i=0; i < busyStarts.length; i++) {
            var date = new Date(date),
                busyStart = new Date(busyStarts[i]),
                busyEnd = new Date(busyEnds[i]);
            if (date.getTime() >= busyStart.getTime() && date.getTime() <= busyEnd.getTime()) {
                cssClass = 'ui-state-disabled busy_date';
            }
        }

        return [true, cssClass];
    }

getTime() 将您的 Date 对象转换为自 1970 年 1 月 1 日 00:00:00 UTC 起经过的毫秒数。这将给您一个整数，您可以轻松比较。

- Jan Beck

---

是的，但在我的情况下，这将产生相同的错误。因为与简单日期对象比较时间戳将在3小时内不同。 - Dmytro Zarezenko

好的，抱歉之前没有正确理解问题。不过很高兴您已经自己解决了它。 - Jan Beck