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

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

例子：

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

这工作，使每个输入一个日期选择器，但它并不妨碍第二次从第一次选择日期之前的日期。事实上它要求第二个实例选择第一个之前的日期。选中时，第二个实例将填充两个输入！

任何人都可以看到我要去哪里错了吗？

来源

2011-02-24 oleonard

我不是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); 
}

上面应该这样做，或者你可以只取散出来的代码可能（我只是做了，似乎工作的罚款）。：]

来源

2011-02-24 17:56:08 lsuarez

@oleonard要清楚，你所要做的就是改变下面一行，删除单词start前面的散列：var option = this.id ==“start _”+ x？ “minDate”：“maxDate” – lsuarez 2011-02-24 18:30:02

啊，你完全正确！我没有意识到“＃”已经悄悄进入，现在它工作正常。谢谢你的额外眼睛！ – oleonard 2011-02-25 17:33:24

@oleonard我确切地知道你的意思。当我建议他真的应该让我看看第二个脑袋是否有助于揭示问题时，我的团队领导正在盯着一个半小时。 “我没有看到这个变量的范围，你忘了输入'点'吗？”问题解决了！ – lsuarez 2011-02-25 20:37:27

这将工作

$("#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 
    }; 
}

来源

2011-02-24 17:46:18 StrouMfios

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

回答

相关问题