今天的日期或之前輸入的選定日期無法選擇

Question

我對我們的應用程序使用Daterangepicker。

創建multitrip日期選取器組件（3個輸入字段）

1. TripOne - 選擇日期（例如：2月19日）
2. TripTwo - 必須從 'TripOne' 選定的日期開始。
3. TripThree - 必須從'TripTwo'選定的日期開始。

上面的東西工作正常。

但是，下面的問題不適用於這個插件。

1. TripOne - 選擇今天的日期（不工作）
2. TripTwo - 如果TripOne選擇2月20日，我不能能夠在TripTwo選擇相同的2月20日。
3. TripThree - 類似於TripTwo。

JS：

var nowDate = new Date(); 
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 
var maxLimitDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()+360, 0, 0, 0, 0); 

$('input[name="tripOne"]').daterangepicker({ 
    "autoApply": true, 
    "autoUpdateInput": false, 
    "singleDatePicker": true, 
    "minDate": today, 
    "maxDate": maxLimitDate, 
    "locale": { 
     format: 'DD MMM YYYY' 
    } 
    },function(start) { 
     $("#tripOne").val(start.format('DD MMM YYYY')); 
     $('#tripOne').parent().parent().removeClass('has-error'); 
     var returnTripStartDate = new Date(Date.parse(start)); 
     $('input[name="tripTwo"]').daterangepicker({ 
     "autoApply": true, 
     "autoUpdateInput": false, 
     "singleDatePicker": true, 
     "minDate": returnTripStartDate, 
     "maxDate": maxLimitDate, 
     "locale": { 
      format: 'DD MMM YYYY' 
     } 
     },function(end) { 
      $("#tripTwo").val(end.format('DD MMM YYYY')); 
      $('#tripTwo').parent().parent().removeClass('has-error'); 
      var returnTripStartDate2 = new Date(Date.parse(start)); 
      $('input[name="tripThree"]').daterangepicker({ 
      "autoApply": true, 
      "autoUpdateInput": false, 
      "singleDatePicker": true, 
      "minDate": returnTripStartDate2, 
      "maxDate": maxLimitDate, 
      "locale": { 
       format: 'DD MMM YYYY' 
      } 
      },function(end) { 
       $("#tripThree").val(end.format('DD MMM YYYY')); 
       $('#tripThree').parent().parent().removeClass('has-error'); 
      }); 
      $(function() { 
       $('.calendar.right').show(); 
      }); 
     }); 
     $(function() { 
     $('.calendar.right').show(); 
     }); 
     $('input[name="tripOne"]').on('apply.daterangepicker', function(ev, picker) { 
     $(this).val(picker.startDate.format('DD MMM YYYY')); 
     }); 
     $('input[name="tripTwo"]').on('apply.daterangepicker', function(ev, picker) { 
     $(this).val(picker.startDate.format('DD MMM YYYY')); 
     }); 
     $('input[name="tripThree"]').on('apply.daterangepicker', function(ev, picker) { 
     $(this).val(picker.startDate.format('DD MMM YYYY')); 
     }); 
    }); 
    $(function() { 
     $('.calendar.right').show(); 
    }); 

​​

Answer 1

的問題不是日期選取器本身......你的就是你正在使用它的方式。在你的代碼，你選擇的東西了一趟＃1日期選擇器的它試圖影響其試圖影響第三:(

正確的做法第二EVERY TIME：初始化所有3個datepickers在文檔ready事件..但等待：你將如何按照你的邏輯改變每個日期選擇器配置

那麼它很簡單，只要：Change option dynamically in JQuery UI DatePicker fails

請長話短說 - 每次在日期選擇器更改某個值時，改變下一個選擇器配置：

function(start) 
{ 
    $("#tripOne").val(start.format('DD MMM YYYY')); 

    // ..... 

    $('input[name="tripTwo"]').datepicker("destroy"); 

    $("#dteEnd").datepicker({ 
    // new options here - with your desired value 
    }); 

    // ......