jQuery Date Picker - 相對於彼此更改日期

Question

你好，我正在嘗試創建一個預訂表單，用戶只能選擇1到14天（從當前日期+1）。我遇到的問題是EndDate（這裏#til）從今天的日期開始設置爲14天。所以如果我在StartDate上出現一個月（這裏#fra），我不能在EndDate中選擇任何東西。

我該如何讓EndDate相對於StartDate設置？

$(function valgavdato() { 
var dateFormat = "mm/dd/yy", 

    from = $("#fra") 
     .datepicker({ 
     minDate: '0+', 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 1 
     }) 
     .on("change", function() { 
     to.datepicker("option", "minDate", getDate(this)); 
     }), 
    to = $("#til").datepicker({ 
     maxDate: '14+', 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 1 
    }) 
    .on("change", function() { 
     from.datepicker("option", "maxDate", getDate(this)); 
    }); 

    function getDate(element) { 
    var date; 
    try { 
     date = $.datepicker.parseDate(dateFormat, element.value); 
    } catch(error) { 
     date = null; 
    } 

    return date; 
    } 
}); 

Answer 1

事情是，maxDate設置爲「今天」加載+14。
你必須計算14天+採摘日期...

因此，這裏有一些工作。
它可能不是最乾淨的的方式來編碼它...
但仍...它的工作原理。

唯一的變化（增加）在#fra變化。

$(function valgavdato() { 
 
    var dateFormat = "mm/dd/yy", 
 
     to_MaxDate = 14; // From date + this = to maxDate 
 

 
     from = $("#fra") 
 
    .datepicker({ 
 
     minDate: '0+', 
 
     defaultDate: "+1w", 
 
     changeMonth: true, 
 
     numberOfMonths: 1 
 
    }) 
 
    .on("change", function() { 
 
     var PickedDate = getDate(this); 
 
     // See that date is in UTC format. 
 
     console.log("From DatePicker: "+JSON.stringify(PickedDate)); 
 
     
 
     // Process the picked date. 
 
     var tempDay = PickedDate.getDate() + to_MaxDate; // Add a number of days to the picked date. 
 
     var tempMonth = PickedDate.getMonth() + 1; // Because months are zero based. 
 
     var tempYear = PickedDate.getYear() + 1900; // Because years are 1900 based 
 
     console.log("Temp date: "+ tempYear+"/"+tempMonth+"/"+tempDay +" --- It may look impossible... But Date() handles it."); 
 

 
     // Create a date object in a UTC format. 
 
     var newMaxDate = new Date(Date.UTC(tempYear, tempMonth-1, tempDay, 23, 59, 59)); 
 
     console.log( "New max date: : "+ JSON.stringify(newMaxDate)); 
 

 
     // Set the minDate ans maxDate options. 
 
     to.datepicker("option", {"minDate": PickedDate, "maxDate": newMaxDate}); 
 

 
    }), 
 
     to = $("#til").datepicker({ 
 
      maxDate: '14+', 
 
      defaultDate: "+1w", 
 
      changeMonth: true, 
 
      numberOfMonths: 1 
 
     }) 
 
    .on("change", function() { 
 
     from.datepicker("option", "maxDate", getDate(this)); 
 
    }); 
 

 
    function getDate(element) { 
 
     var date; 
 
     try { 
 
      date = $.datepicker.parseDate(dateFormat, element.value); 
 
     } catch(error) { 
 
      date = null; 
 
     } 
 

 
     return date; 
 
    } 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> 
 

 

 

 
<input type="text" id="fra"><br> 
 
<br> 
 
<input type="text" id="til">