複数のjQuery UIの日付範囲のピッカー

Question

jQuery Date pickersを複数追加する方法がありますが、単一のページにMultiple jQuery Date Range Pickerを達成することは非常に難しいです。
これは私がこれまでにhttp://jsfiddle.net/ZJRHx/1/

<div class="demo"> 
    <div class="settings"> 
     <label for="from">From</label> 
<input type="text" id="from" name="from" class="pdate"/> 
<label for="to">to</label> 
<input type="text" id="to" name="to" class="fdate"/> 
    </div> 
    <div class="settings"> 
     <label for="from">From</label> 
<input type="text" name="from" class="pdate"/> 
<label for="to">to</label> 
<input type="text" name="to" class="fdate"/> 
    </div> 
</div> 



$('.demo').find('.settings').each(function() { 
     var dates = $(this).find(".pdate, .fdate").datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 
      onSelect: function(selectedDate) { 
       var option = $(this).class == "from" ? "minDate" : "maxDate", 
        instance = $(this).data("datepicker"), 
        date = $.datepicker.parseDate(
         instance.settings.dateFormat || 
         $.datepicker._defaults.dateFormat, 
         selectedDate, instance.settings); 

       dates.not(this).datepicker("option", option, date); 
      } 
     }); 
    }); 

を行っている。しかし私はまだレンジパートを解決canotものです。

Answer 1

あなたはjqueryui.comからjquery uiを含めていますが、これは許可されず、ファイルが正しく読み込まれません。ここでは、主に取り組んであなたのコードとフィドルは次のとおりです。http://jsfiddle.net/ZJRHx/2/

Answer 2

これは私がやった方法です： まずネストご入力日付の範囲を受け取るために：

<div class="date_range"> 
    <input class="date_min calendar" name="min" /> 
    <input class="date_max calendar" name="max" /></div> 

その後、このスクリプトを作成します。

var dates = $(".date_min, .date_max").datepicker({ 
     changeMonth: true, 
     changeYear:true, 
     onSelect: function(selectedDate) { 
      var option = $(this).hasClass("date_min") ? "minDate" : "maxDate", 
      brother = $(this).hasClass("date_min") ? ".date_max" : ".date_min", 
      instance = $(this).data("datepicker"), 
      date = $.datepicker.parseDate(
      instance.settings.dateFormat || $.datepicker._defaults.dateFormat, 
      selectedDate, instance.settings); 
      dates.closest(brother).datepicker("option", option, date); 
     }, 
     beforeShow:function(){ 
      var brother =$(this).hasClass("date_min") ? ".date_max" : ".date_min", 
      option = $(this).hasClass("date_max") ? "minDate" : "maxDate"; 
      if($(this).siblings(brother).val() == ""){ 
       dates.datepicker("refresh").datepicker("option", option, null); 
      } 
     } 
    }); 

私はこのコードを使用して、さまざまなグラフをフィルタリングするための日付を送信しています。それは魅力的です。