jquery - 多个链接的 jQuery UI 日期选择器

Question

我希望能够链接多对 jQuery UI 日期选择器实例，以便每对中的第二个实例无法选择早于第一个实例的日期。我正在关注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 );
            }
        });
    });
});

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

有人能看出我哪里出错了吗？

Answer 1

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

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

上面应该可以做到这一点，或者你可以从你的代码中取出哈希(我刚刚这样做了，似乎工作得很好)。 :]