jQuery Date Picker - Ändern des Datums relativ zueinander

Question

Hallo ich versuche ein Buchungsformular zu erstellen, wo die Benutzer nur zwischen 1 und 14 Tagen wählen können (ab dem aktuellen Datum +1). Das Problem, das ich habe, ist, dass das EndDate (hier #til) auf 14 Tage ab dem heutigen Datum eingestellt ist. Also wenn ich einen Monat auf StartDate (hier #fra) gehe, kann ich im EndDate nichts auswählen.

Wie stelle ich es so ein, dass EndDate relativ zum StartDate gesetzt wird?

$(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

Die Sache ist die, dass maxDate auf Last als „heute“ 14 gesetzt ist.
Sie müssen 14 Tage + das ausgewählte Datum berechnen ...

Also, hier ist etwas arbeiten.
Es möglicherweise nicht die sauberste Weise, es zu kodieren ...
Aber immer noch ... Es funktioniert.

Die einzigen Änderungen (Ergänzungen) sind in #fra bei Änderung.

$(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">