2011-07-09 3 views
0

私のウェブサイトには10​​のjquery.ui.datepickerがあります。誰かが最初のdatepickerで今日の日付を選択した場合、2番目のdatepickerで今日の日付を無効にしたい。 3位、4位、6位などと同様です。他の日付ピッカーで選択できなかった日付ピッカーで選択された日付を意味します。一度選択すると日付を無効にするjquery.ui.datepicker

私はこのようにしていましたが、上から下へ...働いているのは、datepicker 1から10までのことです... datepicker 10から1には対応していません.... datepicker10、

$(function() { 
    $("#datepicker1, #datepicker2, #datepicker3, #datepicker4, #datepicker5, #datepicker6, #datepicker7, #datepicker8, #datepicker9, #datepicker10").datepicker({ 
     minDate: '+1D', 
     maxDate: "+90D", 
     showOn: "button", 
     buttonImage: "images/calendar.gif", 
     buttonImageOnly: true, 
     dateFormat: "D, dd M, yy", 
     onSelect: function (selectedDate) { 
      if (this.id == 'datepicker1') { 
       var dateMin = $('#datepicker1').datepicker("getDate"); 
       var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1); 
       var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 91); 
       $('#datepicker2').datepicker("option", "minDate", rMin); 
       $('#datepicker2').datepicker("option", "maxDate", rMax); 
       $('#datepicker3').datepicker("option", "minDate", rMin); 
       $('#datepicker3').datepicker("option", "maxDate", rMax); 
       $('#datepicker4').datepicker("option", "minDate", rMin); 
       $('#datepicker4').datepicker("option", "maxDate", rMax); 
       $('#datepicker5').datepicker("option", "minDate", rMin); 
       $('#datepicker5').datepicker("option", "maxDate", rMax); 
       $('#datepicker6').datepicker("option", "minDate", rMin); 
       $('#datepicker6').datepicker("option", "maxDate", rMax); 
       $('#datepicker7').datepicker("option", "minDate", rMin); 
       $('#datepicker7').datepicker("option", "maxDate", rMax); 
       $('#datepicker8').datepicker("option", "minDate", rMin); 
       $('#datepicker8').datepicker("option", "maxDate", rMax); 
       $('#datepicker9').datepicker("option", "minDate", rMin); 
       $('#datepicker9').datepicker("option", "maxDate", rMax); 
       $('#datepicker10').datepicker("option", "minDate", rMin); 
       $('#datepicker10').datepicker("option", "maxDate", rMax); 
      } 
      if (this.id == 'datepicker2') { 
       var dateMin = $('#datepicker2').datepicker("getDate"); 
       var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1); 
       var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 91); 
       $('#datepicker3').datepicker("option", "minDate", rMin); 
       $('#datepicker3').datepicker("option", "maxDate", rMax); 
       $('#datepicker4').datepicker("option", "minDate", rMin); 
       $('#datepicker4').datepicker("option", "maxDate", rMax); 
       $('#datepicker5').datepicker("option", "minDate", rMin); 
       $('#datepicker5').datepicker("option", "maxDate", rMax); 
       $('#datepicker6').datepicker("option", "minDate", rMin); 
       $('#datepicker6').datepicker("option", "maxDate", rMax); 
       $('#datepicker7').datepicker("option", "minDate", rMin); 
       $('#datepicker7').datepicker("option", "maxDate", rMax); 
       $('#datepicker8').datepicker("option", "minDate", rMin); 
       $('#datepicker8').datepicker("option", "maxDate", rMax); 
       $('#datepicker9').datepicker("option", "minDate", rMin); 
       $('#datepicker9').datepicker("option", "maxDate", rMax); 
       $('#datepicker10').datepicker("option", "minDate", rMin); 
       $('#datepicker10').datepicker("option", "maxDate", rMax); 
      } 
      if (this.id == 'datepicker3') { 
       var dateMin = $('#datepicker3').datepicker("getDate"); 
       var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1); 
       var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 91); 
       $('#datepicker4').datepicker("option", "minDate", rMin); 
       $('#datepicker4').datepicker("option", "maxDate", rMax); 
       $('#datepicker5').datepicker("option", "minDate", rMin); 
       $('#datepicker5').datepicker("option", "maxDate", rMax); 
       $('#datepicker6').datepicker("option", "minDate", rMin); 
       $('#datepicker6').datepicker("option", "maxDate", rMax); 
       $('#datepicker7').datepicker("option", "minDate", rMin); 
       $('#datepicker7').datepicker("option", "maxDate", rMax); 
       $('#datepicker8').datepicker("option", "minDate", rMin); 
       $('#datepicker8').datepicker("option", "maxDate", rMax); 
       $('#datepicker9').datepicker("option", "minDate", rMin); 
       $('#datepicker9').datepicker("option", "maxDate", rMax); 
       $('#datepicker10').datepicker("option", "minDate", rMin); 
       $('#datepicker10').datepicker("option", "maxDate", rMax); 
      } 
      if (this.id == 'datepicker4') { 
       var dateMin = $('#datepicker4').datepicker("getDate"); 
       var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1); 
       var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 91); 
       $('#datepicker5').datepicker("option", "minDate", rMin); 
       $('#datepicker5').datepicker("option", "maxDate", rMax); 
       $('#datepicker6').datepicker("option", "minDate", rMin); 
       $('#datepicker6').datepicker("option", "maxDate", rMax); 
       $('#datepicker7').datepicker("option", "minDate", rMin); 
       $('#datepicker7').datepicker("option", "maxDate", rMax); 
       $('#datepicker8').datepicker("option", "minDate", rMin); 
       $('#datepicker8').datepicker("option", "maxDate", rMax); 
       $('#datepicker9').datepicker("option", "minDate", rMin); 
       $('#datepicker9').datepicker("option", "maxDate", rMax); 
       $('#datepicker10').datepicker("option", "minDate", rMin); 
       $('#datepicker10').datepicker("option", "maxDate", rMax); 
      } 
      if (this.id == 'datepicker5') { 
       var dateMin = $('#datepicker5').datepicker("getDate"); 
       var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1); 
       var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 91); 
       $('#datepicker6').datepicker("option", "minDate", rMin); 
       $('#datepicker6').datepicker("option", "maxDate", rMax); 
       $('#datepicker7').datepicker("option", "minDate", rMin); 
       $('#datepicker7').datepicker("option", "maxDate", rMax); 
       $('#datepicker8').datepicker("option", "minDate", rMin); 
       $('#datepicker8').datepicker("option", "maxDate", rMax); 
       $('#datepicker9').datepicker("option", "minDate", rMin); 
       $('#datepicker9').datepicker("option", "maxDate", rMax); 
       $('#datepicker10').datepicker("option", "minDate", rMin); 
       $('#datepicker10').datepicker("option", "maxDate", rMax); 
      } 
      if (this.id == 'datepicker6') { 
       var dateMin = $('#datepicker6').datepicker("getDate"); 
       var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1); 
       var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 91); 
       $('#datepicker7').datepicker("option", "minDate", rMin); 
       $('#datepicker7').datepicker("option", "maxDate", rMax); 
       $('#datepicker8').datepicker("option", "minDate", rMin); 
       $('#datepicker8').datepicker("option", "maxDate", rMax); 
       $('#datepicker9').datepicker("option", "minDate", rMin); 
       $('#datepicker9').datepicker("option", "maxDate", rMax); 
       $('#datepicker10').datepicker("option", "minDate", rMin); 
       $('#datepicker10').datepicker("option", "maxDate", rMax); 
      } 
      if (this.id == 'datepicker7') { 
       var dateMin = $('#datepicker7').datepicker("getDate"); 
       var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1); 
       var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 91); 
       $('#datepicker8').datepicker("option", "minDate", rMin); 
       $('#datepicker8').datepicker("option", "maxDate", rMax); 
       $('#datepicker9').datepicker("option", "minDate", rMin); 
       $('#datepicker9').datepicker("option", "maxDate", rMax); 
       $('#datepicker10').datepicker("option", "minDate", rMin); 
       $('#datepicker10').datepicker("option", "maxDate", rMax); 
      } 
      if (this.id == 'datepicker8') { 
       var dateMin = $('#datepicker8').datepicker("getDate"); 
       var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1); 
       var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 91); 
       $('#datepicker9').datepicker("option", "minDate", rMin); 
       $('#datepicker9').datepicker("option", "maxDate", rMax); 
       $('#datepicker10').datepicker("option", "minDate", rMin); 
       $('#datepicker10').datepicker("option", "maxDate", rMax); 
      } 
      if (this.id == 'datepicker9') { 
       var dateMin = $('#datepicker9').datepicker("getDate"); 
       var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1); 
       var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 91); 
       $('#datepicker10').datepicker("option", "minDate", rMin); 
       $('#datepicker10').datepicker("option", "maxDate", rMax); 
      } 
     } 
    }); 
}); 
+0

これらのオプションを設定するには、IDの代わりにクラスを使用する必要があります...あなたのコードはDailyWT F. – ThiefMaster

+0

jQueryを使用することをお勧めします.not(this) – mplungjan

答えて

0

テストが、あなたが行うことができるはずはありません....も同じ日付datepicker9を選択し...だから私もその1を無効にしたい...降順と昇順で選択した日付を無効にすることができます

.select(function() { 
    var dateMin = $(this)("getDate"); 
    var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1); 
    var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 91); 
    $('.datepicker').not(this).each(function() { 
    $(this).datepicker("option", "minDate", rMin); 
    $(this).datepicker("option", "maxDate", rMax); 
    });  
}); 
関連する問題