Çoklu bağlantılı jQuery UI datepickers

Question

jQuery UI datepicker örneklerinin birden çok çiftini birbirine bağlamak istiyorum, böylece her bir çiftteki ikincisi birinden daha erken bir tarih seçemez. Başlamak için this example'u takip ediyorum.

Örnek:

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

ben "sayaç" sayısını bularak örnekleri üzerinde döngü ediyorum: Bu her girişte bir datepicker etkinleştirmek için çalışır

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

ama engellemez İlk önce bir tarih seçerek ikinci örneğini. Aslında, , gerektirir, ikinci örnek ilk önce bir tarih seçer. Seçildiğinde, ikinci örnek her iki girişi de doldurur!

Nerede yanlış gittiğimi gören var mı?

Answer 1

100% çalışacaktır. Ancak, asıl sorununun bu.id testi olduğuna inanıyorum. Kimlikler hiçbir zaman gerçek DOM öğesinde # ile başlamaz.

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

yukarıda yapmalıyım, yoksa sadece (ben sadece yaptı ve iyi iş gibi görünüyor) muhtemelen kod dışarı karma sürebilir. :]

Answer 2

Bu parseDate ne için ya da neden veri deposundan örneğini almak inceliyoruz değilim

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