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);
  }
  
  
  //получаю даты из бд
  const dateot ='2022-04-15';
  const datdo = '2022-05-01';
  
  const dateot1 = '0';
  const datdo1 = '0';
  
  const dateot2 = 2022-04-01;
  const datdo2 = 2022-05-01;


	var disabledDays = [];

	var now = new Date();
	var daysOfYear = [];
  
	for (var d = new Date(Date.parse(dateot)); d <= new Date(Date.parse(datdo)); d.setDate(d.getDate() + 1)) {
    var current_date = new Date(d),
    	day = current_date.getDate(),
    	month = current_date.getMonth() + 1,
    	year = current_date.getFullYear();
    	disabledDays.push(day + '-' + month + '-' + year);
	}
  
  for (var d = new Date(Date.parse(dateot1)); d <= new Date(Date.parse(datdo1)); d.setDate(d.getDate() + 1)) {
    var current_date = new Date(d),
    	day = current_date.getDate(),
    	month = current_date.getMonth() + 1,
    	year = current_date.getFullYear();
    	disabledDays.push(day + '-' + month + '-' + year);
	}
  
  $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);
     ...