flatpickr

by bairog

HTML

<head>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
		<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
		<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/ru.js"></script>
</head>
<body>

<div id="datepicker">
  <input type="text" data-input>
	
	<a class="input-button" title="open calendar" data-toggle>
        <i class="fas fa-calendar"></i>
    </a>

  <a class="input-button" title="clear" data-clear>
        <i class="fas fa-close"></i>
    </a>
</div>

</body>

CSS

.borderGreen {  
  border-color: lime !important;
}

JavaScript

// An array of dates
var allTestsDates = ["2021-03-03T00:00:00", "2021-03-10T00:00:00", "2021-03-17T00:00:00", "2021-03-24T00:00:00"]; 




flatpickr("#datepicker", {
     "locale": "ru",
		 dateFormat: "d.m.Y",
		 maxDate: "today",
     minDate: "2021-03-03",		 	 
		 mode: "range",

		 
		 wrap: true,
		 
		 onDayCreate: function (dObj, dStr, fp, dayElem) {
                    var date = dayElem.dateObj;
                    var index = allTestsDates.findIndex(x => new Date(x).getTime() === date.getTime());
                    if (index != -1) {
                        dayElem.className += " borderGreen";
                    }
                }
});