jQuery的動態minDate和maxDate日期選擇器

我有多個鏈接觸發顯示日期選擇器的對話框。每個日期選擇器都有基於數據屬性的日期範圍。我的問題是日期選擇器只顯示您點擊第一個鏈接的範圍。這裏是我的代碼至今：jQuery的動態minDate和maxDate日期選擇器

<div id="dialog" style="display:none"> 
    <input class="tanggalan" value="2014-04-03"/> 
</div> 
<a class="date-dialog" href="#" data-tgl-min="2013-03-12" data-tgl-max="2013-04-12">min: 2013-03-12 and max: 2013-04-12</a><br /> 
<a class="date-dialog" href="#" data-tgl-min="2013-04-15" data-tgl-max="2013-05-15">min: 2013-04-15 and max: 2013-05-15</a><br /><br />

這是JavaScript的：

$(".date-dialog").live("click", function() { 
    var minDates = $(this).data('tgl-min'); 
    var maxDates = $(this).data('tgl-max'); 
    $('#dialog').dialog({ 
     height: 250, 
     modal: true, 
     buttons: { 
      "Batal": function() { 
       $(this).dialog("close"); 
       var minDates = ''; 
       var maxDates = ''; 
      } 
     }, 
     open: function (event, ui) { 
      //show datepicker 
      $(".tanggalan").datepicker({ 
       minDate: minDates, 
       maxDate: maxDates, 
       dateFormat: 'yy-mm-dd', 
       changeMonth: true, 
       changeYear: true, 
      }); 
      $(".tanggalan").datepicker("show"); 
     }, 
     close: function (event, ui) { 
      //console.log('ditutup'); 
      //trying to clear the variable, 
      //cleared but still false to display date range if i click another link 
      var minDates = ''; 
      var maxDates = ''; 
      console.log(minDates + ' --> ' + maxDates); 
     } 
    }); 
});

對於完整的代碼，我已經把放在這裏：http://jsfiddle.net/ajibari/4d23Y/

來源

2014-04-07 Bari

當你點擊第二個鏈接（點擊第一個鏈接後）第一個日期選擇器仍然綁定到對話框上的輸入字段。我下面的代碼添加到完全刪除日期選擇器關閉時的對話框：

close: function(event, ui){ 
    $(".tanggalan").datepicker("destroy"); 
    ... 
}

時使下一次將會創建一個包含正確的最小和最大日期關閉對話框這將刪除的日期選擇器。

請參閱here小提琴。

來源

2014-04-07 08:55:02

而是一遍遍初始化對話和日期選擇器中，重新安排你的代碼是這樣的：

初始化對話和日期選擇器上的文件準備：
- 不要設置最小和最大的日期選擇日期只是還沒有當點擊該鏈接
- 設置對話框的假
的autoOpen屬性：
- 觸發的option方法上日期選擇器設置和minDatemaxDate
- 觸發的open方法上對話框
- 觸發的show方法上日期選擇器

Demo here

來源

2014-04-07 13:20:33

jQuery的動態minDate和maxDate日期選擇器

回答

相關問題