Я работаю над полями ввода даты, в которых есть jQuery UI datepicker
. Это дата отъезда и дата возвращения. После того, как пользователь выберет дату отъезда и дату возвращения, мне нужно найти разницу между датой, которую он / она покинул, и датой, которую он / она возвратил, и мгновенно заполнить ее в другом поле ввода.
Код разметки
<!--Departure date-->
<input type="text" id="departureDate" class="form-control" placeholder="Departure Date" value="" required>
<!--Return Date-->
<input type="text" id="returnDate" class="form-control" placeholder="Return Date" value="" required>
<!--Output-->
<p>Your trip is<br/> <div>41 days</div></p>
Логика JavaScript
<script>
$(function() {
$("#departureDate").datepicker({
changeMonth: true,
changeYear: true,
minDate: '+1',
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
$("#returnDate").datepicker("option","minDate", selected);
//Remove required attribute
$(this).removeAttr('required');
}
});
$("#returnDate").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
$("#departureDate").datepicker("option","maxDate", selected);
//Remove required attribute
$(this).removeAttr('required');
}
});
});
</script>
Логика для проверки разницы
$(function() {
let $fromDate = $('#departureDate'),
$toDate = $('#returnDate');
$fromDate.datepicker().on('change', function(){
$toDate.datepicker('option', 'minDate', $(this).val());
});
$toDate.datepicker().on('change', function(){
$fromDate.datepicker('option', 'maxDate', $(this).val());
});;
});