jQuery Datepicker limite date de fin à une semaine sans passer le jour précédent

Question

Je cherche à avoir le jour de départ par défaut à hier et la date de fin par défaut à hier ainsi que pour commencer. C'est la date maximum en tout temps.

Je cherche alors à permettre à la date de fin d'avoir un maximum de 7 jours après la date de début une fois que l'utilisateur a changé la date de début. Comment ferais-je cela?

Le code:

var StrtDate = $('#strtDate').datepicker({ 
    defaultDate: -1, 
    maxDate: -1, 
    onSelect: function (selectedDate) { 
     var date = $(this).datepicker('getDate'); 
     createEndDates.not(this).datepicker('option', 'minDate', date); 
    } 
}); 
$('#strtDate').datepicker('setDate', 'today'); 

var EdDates = $('#edDate').datepicker({ 
    defaultDate: -1, 
    maxDate: -1, 
    onSelect: function (selectedDate) { 
    } 
}); 
$('#edDate').datepicker('setDate', 'today'); 

S'il vous plaît laissez-moi savoir comment vous résoudre ce problème. Merci beaucoup.

Answer 1

Essayez ce code

vous pouvez définir maxDate de $('#edDate') sur la sélection $('#strtDate')

var endDate; 
 
var StrtDate = $('#strtDate').datepicker({ 
 
defaultDate: -1, 
 
maxDate: -1, 
 
onSelect: function (selectedDate) { 
 
\t endDate = $(this).datepicker('getDate'); 
 
\t var final=new Date(endDate); 
 
\t final.setDate(endDate.getDate() + 7); 
 
\t $('#edDate').datepicker('option', 'maxDate',final); 
 
} 
 
}); 
 
$('#strtDate').datepicker('setDate', 'today'); 
 
var EdDates = $('#edDate').datepicker({ 
 
defaultDate: -1, 
 
maxDate: -1, 
 
onSelect: function (selectedDate) { 
 
} 
 
}); 
 
$('#edDate').datepicker('setDate', 'today');

#ui-datepicker-div { font-size: 12px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
 
start date: <input type="text" id="strtDate" name="date1"/> <br/> 
 
end date: <input type="text" id="edDate" name="date2"/>