DateTime選擇器分鐘日期和它們之間的範圍

Question

我使用DateTime選擇器，並且我無法管理如何在明天之後創建分日期。第二個問題是如何在它們之間設置3天的最小範圍。

例如：今天是2014/10/29，選擇的最短日期應爲2014/11/01。如果我在第一個DateTime選取器中選擇2014/11/01，則應該有一個範圍，它不允許在DateTime選取器中選擇少於2014/11/04的兩個選項。

謝謝您的幫助...

http://jsfiddle.net/ajmtj1xj/2/

var d1 = null; 
var d2 = null; 

jQuery('#datetimepicker3').datetimepicker({ 
    format:'Y/m/d H:i', 
    dayOfWeekStart:'1', 
    value:'12:00', 
    inline:true, 
    lang:'ru', 
    onChangeDateTime:function(dp,$input){ 
    d1 = new Date($input.val()); 
     calcDiff(); 
    } 

}); 

jQuery('#datetimepicker2').datetimepicker({ 
    format:'Y/m/d H:i', 
    dayOfWeekStart:'1', 
    value:'12:00', 
    inline:true, 
    lang:'ru', 
    onChangeDateTime:function(dp,$input){ 
     d2 = new Date($input.val()); 
calcDiff(); 
    } 

}); 

function calcDiff(){ 
    if(d1 != null && d2 != null){ // We have both dates 
     var dh = (d2 - d1)/1000/60/60; 
     $("#difference").val(dh); 
    } 
} 

Answer 1

您可以用下面的代碼實現這一點。訣竅是銷燬第二個datetimepicker並用新的minDate值重新渲染。

$(document).ready(function() { 
    var today = new Date(); 
    // Add one extra day when today from Sunday to Thursday and two extra days when today is Friday or Saturday. 
    var plusStartDays = 3 + (today.getDay() <= 4 ? 1 : 2); 

    var minStart = new Date(today); 
    minStart.setDate(today.getDate() + plusStartDays); 

    var minEnd = new Date(minStart); 
    minEnd.setDate(minEnd.getDate() + 3); 

    $("#start").datetimepicker({ 
     format: "Y/m/d H:i", 
     dayOfWeekStart: "1", 
     value: "12:00", 
     inline: true, 
     lang: "nl", 
     onSelectDate: function (ct) { 
      var diff = CalcDiff(); 

      var minDate = new Date(ct); 
      minDate.setDate(minDate.getDate() + 3); 

      if (diff > 72) 
       var defDate = new Date($("#end").val()); 

      $("#end").datetimepicker("destroy"); 
      $("#end").datetimepicker({ 
       format: "Y/m/d H:i", 
       dayOfWeekStart: "1", 
       value: "12:00", 
       inline: true, 
       lang: "nl", 
       minDate: minDate, 
       defaultDate: defDate || minDate, 
       onSelectDate: function (ct) { 
        CalcDiff(); 
       }, 
       onSelectTime: function (ct) { 
        CalcDiff(); 
       } 
      }).val(defDate || minDate); 

      CalcDiff(); 
     }, 
     onSelectTime: function (ct) { 
      CalcDiff(); 
     }, 
     minDate: minStart, 
     defaultDate: minStart 
    }).val(minStart); 

    $("#end").datetimepicker({ 
     format: "Y/m/d H:i", 
     dayOfWeekStart: "1", 
     value: "12:00", 
     inline: true, 
     lang: "nl", 
     minDate: minEnd, 
     defaultDate: minEnd, 
     onSelectDate: function (ct) { 
      CalcDiff(); 
     }, 
     onSelectTime: function (ct) { 
      CalcDiff(); 
     } 
    }).val(minEnd); 

    CalcDiff(); 
}); 

function CalcDiff() { 
    var start = new Date($("#start").val()); 
    var end = new Date($("#end").val()); 

    if (start != null && end != null) { // We have both dates 
     var hours = Math.round((end - start)/36e5); 
     $("#difference").val(hours); 
    } 

    return hours; 
} 

的工作示例，請參見本FIDDLE。

編輯：更新小提琴的修補程序，在本月的最後一天跳過一個月，並選擇比當前選定結束日晚3天以上的開始日期。

編輯2：今天是星期日到星期四，增加一個額外的日期開始日期，今天是星期五或星期六時增加兩個日期。