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

时间:2010-10-25 18:40:46

标签: javascript jquery json datepicker uidatepicker

我正在尝试获取我的日期选择器(jQuery UI Datepicker),其中有一个字段用于“签到”,另一个用于“签出”以根据最小时间段(以秒为单位)更新签出日期)当用户选择登记日期时,通过ajax拉入,但也允许更改选项。

例如,我想在1月1日办理登机手续,因此结帐字段会根据通过ajax提取的最小2592000秒(30天)更新到1月31日。但后来我改变主意并决定在12月31日办理登机手续,所以我应该让我将登记日期更改为更早的办理日期,并自动将结账时间更新为1月30日。

下面是我的代码,其注释位几乎达到我想要的效果,但它不允许更改早期日期,而且我不确定如何将结账日期限制在检查的最短期限内 - 在。通过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}]

2 个答案:

答案 0 :(得分:2)

答案 1 :(得分:0)

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

http://jsbin.com/eramu5

已更新

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

http://jsbin.com/ihufi5

Here's a video explaining how my script works