Jquery UI Datepicker日期范围内联问题

时间:2010-05-08 17:12:02

标签: jquery user-interface uidatepicker jquery-ui-datepicker

嘿伙计,

我的jQuery UI Datepicker存在很大问题。

我有两个输入字段“From Date”和“To Date”。当我选择From Date时 - “To Date”选择器中应该出现仅5天的日期范围。

我使用了“Russ Cam”中的代码jQuery datepicker- 2 inputs/textboxes and restricting range

它运作得很完美。

现在我的问题:

我有第二个日历是INLINE,表示没有输入字段 - 它直接在页面上显示 - 带有“From Date”和“To Date”。在这个日历中脚本不起作用! “从日期”和“到日期”中的所有字段均可用 - 无日期范围限制或其他内容。

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

1 个答案:

答案 0 :(得分:0)

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