I am working on some date input fields which have jQuery UI datepicker
in them. They are namely departure date and return date. They work well. After the user selects the departure date and return date, I need to find the difference between the date h/she departed and the date h/she returned and populate in another input field instantly.
Kindly assist?
Markup Code
<!--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 Logic
<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>
Logic to check difference
$(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());
});;
});