多個鏈接的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日期選擇器

回答

相關問題