jqueryui datepicker - 維護兩個日期之間的偏移量

我正在使用jqueryui datepicker（http://jqueryui.com/datepicker/#date-range）來選擇用於安排事件的範圍。我試圖維護開始日期更改後兩個日期之間的偏移量。我在另一篇文章（Add a day with selected date using Jquery datepicker）中找到了一個合理的解決方案，但是我發現當你選擇一個在當前選擇的開始日期之前的日期時（例如：將開始日期從10/20/2013更改爲2013年10月13日）它返回所選的最後日期而不是偏移日期。jqueryui datepicker - 維護兩個日期之間的偏移量

<script> 
$(document).ready(function() { 

$("#date_start").datepicker({ 
    changeMonth: true, 
    numberOfMonths: 1, 
    dateFormat: "yy-mm-dd", 
    showOn: "both", 
    buttonImage: "images/smCal.gif", 
    buttonImageOnly: true, 
    constrainInput: true, 
    onSelect: function(selectedDate) { 
     var stDate = $("#curStartDate").val().split('-'); 
     var enDate = $("#date_end").val().split('-'); 

     var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds 
     var firstDate = new Date(stDate[0],stDate[1],stDate[2]); 
     var secondDate = new Date(enDate[0],enDate[1],enDate[2]); 

     var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay))); 

     if(!isNumber(diffDays)) { 
     diffDays = 0; 
     } 

     var date2 = $('#date_start').datepicker('getDate'); 
     date2.setDate(date2.getDate()+diffDays); 

     $('#date_end').datepicker('setDate', date2); 
    $("#curStartDate").val(selectedDate) 
    $("#date_end").datepicker("option", "minDate", selectedDate); 
    } 
}); 

$("#date_end").datepicker({ 
    changeMonth: true, 
    numberOfMonths: 1, 
    dateFormat: "yy-mm-dd", 
    showOn: "both", 
    buttonImage: "images/smCal.gif", 
    buttonImageOnly: true, 
    constrainInput: true, 
    minDate:$("#date_start").val() 
}); 

$("#curStartDate").val($("#date_start").val()); 
}); 
function isNumber(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
} 
</script>

來源

2013-10-24 J0E79

我想通了這個問題。我將minDate設置爲#date_end值，以設置#date_start的當前值。所以它會自動將日期選擇更正爲#date_start中最後一個選定日期的最新可用日期。所以要解決這個問題，我只是在嘗試更改#date_end之前更改minDate。

新代碼：

<script> 
$(function() { 

    $("#date_start").datepicker({ 
    changeMonth: true, 
    numberOfMonths: 1, 
    dateFormat: "yy-mm-dd", 
    showOn: "both", 
    buttonImage: "images/smCal.gif", 
    buttonImageOnly: true, 
    constrainInput: true, 
    onSelect: function(selectedDate) { 
     var diffDays = daydiff(parseDate($('#curStartDate').val()), parseDate($('#date_end').val())); 

     if(!isNumber(diffDays)) diffDays = 0; 

     var date2 = $('#date_start').datepicker('getDate'); 
     date2.setDate(date2.getDate()+diffDays); 

     $("#date_end").datepicker("option", "minDate", selectedDate); 
     $('#date_end').datepicker('setDate', date2); 
    $("#curStartDate").val(selectedDate) 
    } 
    }); 

    $("#date_end").datepicker({ 
    changeMonth: true, 
    numberOfMonths: 1, 
    dateFormat: "yy-mm-dd", 
    showOn: "both", 
    buttonImage: "images/smCal.gif", 
    buttonImageOnly: true, 
    constrainInput: true, 
    minDate:$("#date_start").val() 
    }); 

$("#curStartDate").val($("#date_start").val()); 
}); 

function isNumber(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
} 
function parseDate(str) { 
    var mdy = str.split('-'); 
    return new Date(mdy[0], mdy[1]-1, mdy[2]); 
} 
function daydiff(first, second) { 
    return (second-first)/(1000*60*60*24); 
} 
</script>

來源

2013-10-24 11:51:09 J0E79

jqueryui datepicker - 維護兩個日期之間的偏移量

回答

相關問題