jquery - Jquery UI Datepicker 日期范围内联问题

Question

大家好，

我对 jQuery UI Datepicker 有一个大问题。

我有两个输入字段“从日期”和“截止日期”。当我选择从日期时 - 只有 5 天的日期范围应该出现在“截止日期”选择器上。

我使用了来自“Russ Cam” jQuery datepicker- 2 个输入/文本框和限制范围的代码

它工作完美。

现在我的问题：

我有第二个日历，它是内联的，意味着没有输入字段 - 它直接显示在页面上 - 带有“从日期”和“截止日期”。在这个日历中，脚本不起作用！“从日期”和“截止日期”中的所有字段都可用 - 没有日期范围限制或其他内容。

这里有什么问题？有人可以给我一个提示吗？

Answer 1

aSeptik：

是肯定的：

这是我的 HTML 代码：

                <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> 

我的 JS 代码：

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

和 CustomRangeInline 函数：

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
        }; 
}