Jquery UI Datepicker Date Range Inline Problem

Question

Hey Guys,

i have a big Problem with jQuery UI Datepicker.

I have two Input Fields "From Date" and "To Date". When i choose a From Date - a Daterange of only 5 Days should appear on the "To Date" Picker.

I used the Code from "Russ Cam" http://stackoverflow.com/questions/330737/jquery-datepicker-2-inputs-textboxes-and-restricting-range

It worked perfect.

Now my Problem:

I have a second Calendar which is INLINE, means no Input Fields - it's shown directly on the Page - with "From Date" and "To Date". In this Calendar the Script does not work! All Fields in "From Date" and in the "To Date" are available - no Date Range Restrictions or something else.

What's wrong here? Can someone give me a hint?

Answer 1

aSeptik:

Yes for sure:

Here's my HTML Code:

                <div class="calendars">
                    <div class="left">
                        <span class="head">Anreise</span>
                        <div id="navfrom"></div>
                    </div>

                    <div class="right">
                        <span class="head">Abreise</span>
                        <div id="navto"></div>
                    </div>
                </div> 

My JS Code:

    $('#navfrom, #navto').datepicker(
    {
        beforeShow: customRangeInline,
        dateFormat: "dd.mm.y",
        firstDay: 1, 
        changeFirstDay: false
    });

And the CustomRangeInline Function:

function customRangeInline(input) 
{ 
        var min = new Date(2008, 11 - 1, 1);
        var dateMin = min;
        var dateMax = null;
        var dayRange = 5;

        if (input.id == "navfrom") 
        {
            if ($("#navto").datepicker("getDate") != null)
            {                
                dateMin = $("#navto").datepicker("getDate");
                dateMin.setDate(dateMin.getDate());
                if (dateMin < min)
                {
                    dateMin = min;
                }
             }                   
        }
        else if (input.id == "navto")
        {
                dateMax = new Date(); //Set this to your absolute maximum date

                if ($("#navfrom").datepicker("getDate") != null)
                {
                        dateMin = $("#navfrom").datepicker("getDate");
                        var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + dayRange);

                        if(rangeMax > dateMax)
                        {
                            dateMax = rangeMax; 
                        }
                }
        }
        return {
                minDate: dateMin, 
                maxDate: dateMax
        }; 
}