多个链接的 jQuery UI 日期选择器答案

【问题标题】：Multiple linked jQuery UI datepickers多个链接的 jQuery UI 日期选择器
【发布时间】：2011-02-24 17:35:18
【问题描述】：

我希望能够链接多对 jQuery UI datepicker 实例，以便每对中的第二个不能选择早于第一个的日期。我正在关注this example 开始。

例子：

<ul>
<li>
<input class="counter" name="counter" type="hidden" value="43"/>
<label>Start: </label><input name="start_43" id="start_43" size="10" />
<label>End: </label><input name="end_43" id="end_43" size="10" />
</li>

<li>
<input class="counter" name="counter" type="hidden" value="44"/>
<label>Start: </label><input name="start_44" id="start_44" size="10" />
<label>End: </label><input name="end_44" id="end_44" size="10" />
</li>
</ul>

我通过查找“计数器”编号来遍历实例：

$(document).ready(function() {
    var starts = $("input[name='counter']");
    var dates = new Array();
    starts.each(function(){
        var x = this.value;
        // http://jqueryui.com/demos/datepicker/#date-range
        dates[x] = $( "#start_"+x+", #end_"+x ).datepicker({
            onSelect: function( selectedDate ) {
            var option = this.id == "#start_"+x ? "minDate" : "maxDate",
            instance = $( this ).data( "datepicker" );
            date = $.datepicker.parseDate(
            instance.settings.dateFormat ||
            $.datepicker._defaults.dateFormat,
            selectedDate, instance.settings );
            dates[x].not( this ).datepicker( "option", option, date );
            }
        });
    });
});

这可以在每个输入上启用日期选择器，但不会阻止第二个实例选择第一个之前的日期。事实上，它要求第二个实例在第一个实例之前选择一个日期。选中后，第二个实例会填充两个输入！

谁能看出我哪里出错了？

【问题讨论】：

标签： jquery jquery-ui datepicker

【解决方案1】：

我不是 100% 了解 parseDate 的用途，或者您为什么要从数据存储中检索实例。但是，我相信您的主要问题是 this.id 测试。 ID 在实际的 DOM 元素中从不以 # 开头。

onSelect: function(selectedDate) {
    var option = this.id.indexOf("start_") != -1 ? "minDate" : "maxDate";
    dates[i].not(this).datepicker("option", option, selectedDate);
}

上面应该做到这一点，或者你可以从你的代码中取出散列（我刚刚做了并且似乎工作正常）。 :]

【讨论】：

@oleonard 为了清楚起见，您所要做的就是更改以下行，删除单词 start 前面的哈希： var option = this.id == "start_"+x ? "minDate" : "maxDate"
啊，你说得对！我没有意识到“#”已经潜入。现在它可以正常工作了。感谢您额外的一双眼睛！
@oleonard 我完全明白你的意思。我的团队负责人盯着某样东西看了大约半个小时，当时我建议他真的应该让我看看第二个脑袋是否有助于揭示问题。 “我没有看到这个变量的作用域。你忘了输入'点'吗？”问题解决了！

【解决方案2】：

这会起作用

$("#FirstCal").datepicker({
        dateFormat: 'M d, yy',
        navigationAsDateFormat: true, prevText: 'M', nextText: 'M',
        changeMonth: true,
        changeYear: true,
        showOn: "both",
        showStatus: true,
        firstDay: 0,
        changeFirstDay: false,
        beforeShow: customRange,
        buttonImage: '/Content/images/Calendar_img.png',
        buttonImageOnly: true
    });

    $("#secondCal").datepicker({
        dateFormat: 'M d, yy',
        navigationAsDateFormat: true, prevText: 'M', nextText: 'M',
        changeMonth: true,
        changeYear: true,
        showOn: "both",
        showStatus: true,
        firstDay: 0,
        changeFirstDay: false,
        beforeShow: customRange,
        buttonImage: '/Content/images/Calendar_img.png',
        buttonImageOnly: true
    });

function customRange(input) {
    var min = new Date();
    var min = new Date('<%=DateTime.Now.Year %>', '0', '1');
    var max = new Date('<%=DateTime.Now.AddYears(1).Year %>', '11', '31');

    var dateMin = min;
    var dateMax = max;

    if (input.id == "firstCal" && $("#secondCal").datepicker("getDate") != null) {
        if (dateMin < min) {
            dateMin = min;
        }
    }
    else if (input.id == "secondCal") {
        if ($("#firstCal").datepicker("getDate") != null) {
            dateMin = $("#firstCal").datepicker("getDate");
        }
    }
    return {
        minDate: dateMin,
        maxDate: dateMax
    };
}

【讨论】：