Múltiples selectores de fecha jQuery UI vinculados

Question

Quiero poder vincular varios pares de instancias de jQuery UI datepicker para que el segundo en cada par no pueda seleccionar una fecha anterior a la primera. Estoy siguiendo this example para comenzar.

Ejemplo:

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

estoy bucle a través de los casos mediante la búsqueda de la "contra" número:

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

Esto funciona para permitir que un planificador de evento en cada entrada, pero que no impide la segunda instancia de elegir una fecha anterior a la primera. De hecho, requiere que la segunda instancia elija una fecha anterior a la primera. Cuando se selecciona, la segunda instancia rellena ambas entradas.

¿Alguien puede ver dónde me está yendo mal?

Answer 1

no estoy 100% de lo que el parseDate es para, o por qué está trayendo el ejemplo desde el almacén de datos. Sin embargo, creo que su problema principal es la prueba this.id. Los ID nunca comienzan con # en el elemento DOM real.

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

Lo anterior debe hacerlo, o simplemente podría tomar el hash de su código, probablemente (que acabo de hacer y parece funcionar bien). :]

Answer 2

Esto funcionará

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