2016-03-05 61 views
0

我有一種情況,用戶只能選擇7天的日期範圍。Eonasdan Bootstrap鏈接日期時間選取器不按預期方式工作

因此,如果開始日期爲01-02-2016 00:00最大結束日期應爲06-02-2016 23:59

然後,如果用戶選擇08-02-2016 00:00的最大結束日期應爲14-02-2016 23:59

所以爲了這個,我現在用的日期時間選取: http://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

我遇到的問題是當我執行第一個條件時,它工作正常 - 但是當我選擇第二個條件時,它會在控制檯中給出一個錯誤。

enter image description here

這裏是我的代碼:

$(function() { 

    $('#HistoryStartDate').datetimepicker({ 
    format: 'DD/MM/YYYY HH:mm', 
    allowInputToggle: true, 
    useCurrent: true 
    }).on('dp.change', function(e) { 
    $('#HistoryEndDate').data('DateTimePicker').minDate(e.date); 
    var m = moment(new Date(e.date)); 
    m.add(6, 'days'); 
    $('#HistoryEndDate').data('DateTimePicker').maxDate(m); 
    }); 

    $('#HistoryEndDate').datetimepicker({ 
    format: 'DD/MM/YYYY HH:mm', 
    allowInputToggle: true, 
    useCurrent: true 
    }); 


}); 

這裏是的jsfiddle:https://jsfiddle.net/xsmsym3m/

編輯:

我找到了一個解決辦法這似乎並不像一個好的解決方案,因爲它會在某些情況下失敗,但我在這裏發佈(https://jsfiddle.net/v18gfo4s/):

$(function() { 

    $('#HistoryStartDate').datetimepicker({ 
    format: 'DD/MM/YYYY HH:mm', 
    allowInputToggle: true, 
    useCurrent: true 
    }).on('dp.change', function(e) { 

    // Adding two years so I can set the Min Date 
    var tt = moment(new Date(e.date)); 
    tt.add(2, 'years'); 
    $('#HistoryEndDate').data('DateTimePicker').maxDate(tt); 

     // Set the Min date 
    $('#HistoryEndDate').data('DateTimePicker').minDate(e.date); 

    //Set the Max Date 
    var m = moment(new Date(e.date)); 
    m.add(5, 'days'); 
    m.add(23, 'hours'); 
    m.add(59, 'minutes'); 
    m.add(59, 'seconds'); 
    $('#HistoryEndDate').data('DateTimePicker').maxDate(m); 

     // Set End Date 
    var temp = moment(new Date(e.date)); 
    temp.add(23, 'hours'); 
    temp.add(59, 'minutes'); 
    temp.add(59, 'seconds'); 

    $('#HistoryEndDate').data('DateTimePicker').date(temp); 
    }); 

    $('#HistoryEndDate').datetimepicker({ 
    format: 'DD/MM/YYYY HH:mm', 
    allowInputToggle: true, 
    useCurrent: false 
    }); 


}); 
+0

對不起,這是我的誤解。但是,你認爲「看起來不是一個好的解決方案」意味着什麼。你想盡量減少代碼? –

+0

@ManhLe我的意思是這是一個解決方法 - 添加2年設置最短日期不應該是一個解決方案。 –

回答

1

您可以嘗試更新第二揀取器之前檢查新minDate值。

$(function() { 
 

 
    $('#HistoryStartDate').datetimepicker({ 
 
     format: 'DD/MM/YYYY HH:mm', 
 
     allowInputToggle: true, 
 
     useCurrent: true 
 
    }).on('dp.change', function(e) { 
 
     var minNew = e.date; 
 
     var maxNew = e.date.clone().add(6, 'days'); 
 
     var pickEnd = $('#HistoryEndDate'); 
 
     var minOld = pickEnd.data('DateTimePicker').minDate(); 
 
     var maxOld = pickEnd.data('DateTimePicker').maxDate(); 
 
    
 
     if(minOld && minOld.isAfter(maxNew)){ 
 
      pickEnd.data('DateTimePicker').minDate(minNew); 
 
      pickEnd.data('DateTimePicker').maxDate(maxNew); 
 
     } else { 
 
      pickEnd.data('DateTimePicker').maxDate(maxNew); 
 
      pickEnd.data('DateTimePicker').minDate(minNew); 
 
     } 
 
    }); 
 

 
    $('#HistoryEndDate').datetimepicker({ 
 
     format: 'DD/MM/YYYY HH:mm', 
 
     allowInputToggle: true, 
 
     useCurrent: true 
 
    }); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment-with-locales.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> 
 

 
<div class="form-horizontal"> 
 
    <div class="col-md-4"> 
 
    <div class="form-group"> 
 
     Start Date 
 
     <div class="col-md-9"> 
 
     <div class='input-group date' id="HistoryStartDate"> 
 
      <input type='text' class="form-control" name="HistoryStartDate" value="05/03/2016 00:00" /> 
 
      <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="form-group"> 
 
     End Date 
 
     <div class="col-md-9"> 
 
     <div class='input-group date' id="HistoryEndDate"> 
 
      <input type='text' class="form-control" name="HistoryEndDate" value="05/03/2016 23:59" /> 
 
      <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>