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
$(function() {
$("#datepicker").datepicker();
});
var $start = $('#start'),
$end = $('#end');
$start.datepicker({
onSelect: function(fd, date) {
$end.data('datepicker')
.update('minDate', date);
$end.focus();
}
})
$end.datepicker({
onSelect: function(fd, date) {
$start.data('datepicker')
.update('maxDate', date)
}
})
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: 'Предыдущий',
nextText: 'Следующий',
currentText: 'Сегодня',
monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
monthNamesShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
dayNames: ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'],
dayNamesShort: ['вск', 'пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт'],
dayNamesMin: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
weekHeader: 'Не',
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['ru']);