JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://bazaub.ru/media/datepicker/datepicker.css">
<script src="https://bazaub.ru/media/admin/js/2.2.4jquery.min.js"></script>
<script src="https://bazaub.ru/media/datepicker/datepicker.js"></script>
<label>Дата заезда <b>*</b></label>
<input type="text" id="start" name="datazaezd" placeholder="Выбрать дату">
<br/>
<label>Дата выезда <b>*</b></label>
<input type="text" id="end" name="dataviezd" placeholder="Выбрать дату">
CSS
.ui-widget-content td.range a {
background: red;
color: white;
}
#dayCount {
font-size: 72px;
color: red;
}
JavaScript
var $start = $('#start');
var $end = $('#end');
function toDate(fd) {
year = +fd.split(".")[2];
month = +fd.split(".")[1];
day = +fd.split(".")[0];
return new Date(year, month - 1, day);
}
$start.datepicker({
minDate: new Date(), //запрещает выбор прошедшей даты
onSelect: function(fd, date) {
var date_from = toDate(fd);
var date_to = toDate($end.val());
var days_count = Math.abs(date_to - date_from) / 86400000;
if (!isNaN(days_count)) {
$("#days_count").text(days_count);
$('#datedney').val(days_count); //передаем значание в импут по ид, в value
}
$end.data("datepicker").update("minDate", date);
$end.focus(); //перекидывает на выбор даты выезд
},
});
$end.datepicker({
onSelect: function(fd, date) {
var date_from = toDate($start.val());
var date_to = toDate(fd);
var days_count = Math.abs(date_to - date_from) / 86400000;
if (!isNaN(days_count)) {
$("#days_count").text(days_count);
$('#datedney').val(days_count); //передаем значание в импут по ид, в value
calc();
$("#kolvovzros").focus(); // перекидывает на выбор след импут
}
},
});