JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" name="arrival" class="datepicker datepicker_arrival textfield" placeholder="Arrival Date" />
<input type="text" name="departure" class="datepicker datepicker_departure textfield" placeholder="Departure Date" />
JavaScript
$(".datepicker_arrival").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onSelect: function(dateText, inst) {
if($('.datepicker_departure').val() == '') {
var current_date = $.datepicker.parseDate('dd/mm/yy', dateText);
current_date.setDate(current_date.getDate()+1);
$('.datepicker_departure').datepicker('setDate', current_date);
}
},
onClose: function( selectedDate, test) {
var day = ('0' + (parseInt(test.selectedDay))).slice(-2);
var month = ('0' + (test.selectedMonth)).slice(-2);
var year = test.selectedYear;
var tempDate = new Date(year, month, day);
tempDate.setDate(tempDate.getDate()+1);
var MyDateString = ('0' + (parseInt(tempDate.getDate()))).slice(-2) + '/' + ('0' + (tempDate.getMonth()+1)).slice(-2) + '/' + tempDate.getFullYear();
$(".datepicker_departure").datepicker( "option", "minDate", MyDateString);
}
});
$(".datepicker_departure").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onClose: function( selectedDate ) {
$( ".datepicker_arrival" ).datepicker( "option", "maxDate", selectedDate );
}
});