jQuery UI Datepicker restricted AND changeable date range that auto updates

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 work开发者_JAVA百科s 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}]

---

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

I think I have it working

---

Does this get you any closer to what you want?

http://jsbin.com/eramu5

UPDATED

I've updated my script so that you can have a minimum of 1 month. And you can set the dates in the checkin and the checkout date pickers.

http://jsbin.com/ihufi5

Here's a video explaining how my script works