Question

I’m trying to get my datepicker (jQuery UI Datepicker), which has one field for “check-in” and another for “check-out” to update the check-out date based on the minimum period (in seconds) pulled in via ajax when the user chooses a check-in date, but to also allow choices to be changed.

For example I want to check-in on January 1, so the check-out field updates to January 31 based on the minimum 2592000 seconds (30 days) pulled in via ajax. But then I change my mind and decide to check-in on December 31 instead, so it should let me change the check-in date to an earlier one, and update the check-out to January 30 automatically.

Below is my code with the commented out bit that almost achieves what I want except it doesn’t allow changes to earlier dates, and I’m not sure how to restrict the check-out date to the minimum period from check-in. The data pulled in via ajax also has the periods of availability so the calendar shows available days as selectable, and already booked days as not selectable. This part works fine. Any suggestions for the part that doesn’t?

$.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
                }
            });
        }
    });

Example ajax data showing available period and min booking length in seconds:

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

Answer 1

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

I think I have it working