JSFiddle - React, Tailwind, and code Playground

by stefanu

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/6.2.4/picnic.min.css">
<script src="https://npmcdn.com/flatpickr"></script>
<link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/material_blue.css">
<form>
	<input type="text" placeholder="Select Date.." id="date" class="flatpickr">
</form>

CSS

form {
	padding: 2rem
}

input {
	max-width: 20rem
}

.cool-date {
  border: 1px solid red !important;
}

JavaScript

var coolDates = [Date.parse('2022-11-1'), Date.parse('2016-11-5')];

flatpickr('.flatpickr', {
    onDayCreate: function(dObj, dStr, fp, dayElem) {
        // Checking to see if the current day object is in our array
       // The `+` is just a shortcut for parsing the date
        if (coolDates.indexOf(+dayElem.dateObj) !== -1) {
          dayElem.className += " cool-date";
        }
    }
});