jQuery UI Datepicker 限制和可更改的自动更新日期范围答案

【问题标题】：jQuery UI Datepicker restricted AND changeable date range that auto updatesjQuery UI Datepicker 限制和可更改的自动更新日期范围
【发布时间】：2011-04-30 09:13:05
【问题描述】：

我正在尝试获取我的日期选择器（jQuery UI Datepicker），它有一个用于“签入”的字段和另一个用于“签出”的字段，以根据最短期限（以秒为单位）更新签出日期) 当用户选择入住日期时通过 ajax 拉入，但也允许更改选择。

例如，我想在 1 月 1 日签入，因此签出字段会根据通过 ajax 拉入的最短 2592000 秒（30 天）更新为 1 月 31 日。但后来我改变主意，决定改为在 12 月 31 日入住，所以它应该让我将入住日期更改为更早的日期，并自动将退房日期更新为 1 月 30 日。

下面是我的代码，带有注释掉的位，几乎可以实现我想要的，除了它不允许更改更早的日期，而且我不确定如何将退房日期限制为从 check-在。通过 ajax 提取的数据也有可用时间段，因此日历显示可用天数为可选，而已预订天数为不可选择。这部分工作正常。对于没有的部分有什么建议吗？

$.ajax({
        url: "/ping/availability.php",
        data: "pid="+$('#pid').text(),
        dataType: "json",
        success: function(calendarEvents){
            var dates = $("#checkin, #checkout").datepicker({
                changeMonth: true,
                numberOfMonths: 1,
                /*onSelect: function(selectedDate) {
                    var option = this.id == "checkin" ? "minDate" : "maxDate";
                    var instance = $(this).data("datepicker");
                    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);
                },*/
                dateFormat: 'M d, yy',
                beforeShowDay: function (date){
                    for (i = 0; i < calendarEvents.length; i++) {
                        var b,e,c;
                        b = Date.parse(calendarEvents[i]['from']);
                        e = Date.parse(calendarEvents[i]['to']);
                        c = Date.parse(date);
                        if((c <= e && c >= b)) {
                            return [true,"ui-state-notbooked"];
                        }
                    }
                    return [false, "ui-state-booked"];//disable all other days
                }
            });
        }
    });

以秒为单位显示可用时间段和最短预订时长的示例 ajax 数据：

[{"from":"Tue, 01 Feb 2011 00:00:00 -0800","to":"Fri, 30 Sep 2011 00:00:00 -0700","min":7776000}]

【问题讨论】：

您共享的代码中肯定缺少某些内容。我无法复制你说现在正在工作的功能。当我从复选框中选择一个日期时，它似乎根本不会影响第二个选择框。
好的，它似乎限制了第二个选择框的最小选择，但它似乎没有设置它的值。
我的错，我在上面的文章中有一个不合逻辑的要求。结帐日期无需始终更新为自 cehckin 起 30 天。要求应该只是结帐时间至少从签到后 30 天。

标签： javascript jquery json datepicker uidatepicker

【解决方案1】：

http://jsfiddle.net/generalhenry/LerRw/2/

我想我已经成功了

【讨论】：

我认为您的问题与作者描述的相同。如果您选择一个检查日期，然后在第一个日期之前重新选择一个检查日期，它不会更新检查日期。
这个获得了第一个响应，获得其他用户的投票并且没有破坏我的代码中已经可以使用的任何内容的积分，即 beforeShowDay 函数。感谢大家。我需要停止假设 UI-Datepicker 具有它没有的内置功能。我本可以设计出这种类型的解决方案，但假设如果 datepicker 可以限制范围，则有一种内置方式可以在不刷新页面的情况下更新所选范围。

【解决方案2】：

这会让你更接近你想要的吗？

http://jsbin.com/eramu5

更新

我已经更新了我的脚本，以便您至少可以使用 1 个月。您可以在签入和结帐日期选择器中设置日期。

http://jsbin.com/ihufi5

Here's a video explaining how my script works

【讨论】：