JSFiddle - React, Tailwind, and code Playground

by vlit

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);
  }

	var disabledDays = [
  { start: "2022-04-01", end: "2022-04-10"}, 
{ start: "2022-05-10", end: " 2022-05-25"},
{ start: "2022-06-10", end: " 2022-07-25"},
];

  $start.datepicker({
	  onRenderCell: function (date, cellType) {
        if (cellType == 'day') {
            var day = date.getDate(),
            		month = date.getMonth() + 1,
            		year = date.getFullYear(),
                isDisabled = disabledDays.includes(day + '-' + month + '-' + year);

            return {
                disabled: isDisabled
            }
        }
    },
    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({
  	onRenderCell: function (date, cellType) {
        if (cellType == 'day') {
            var day = date.getDate(),
            		month = date.getMonth() + 1,
            		year = date.getFullYear(),
                isDisabled = disabledDays.includes(day + '-' + month + '-' + year);

            return {
                disabled: isDisabled
            }
        }
    },
    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); //передаем значание в...