JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<input type="text" class="datepicker" name="datepicker" value="">
JavaScript
flatpickr('.datepicker', {
mode: "range",
altInput: true,
altFormat: "M j",
dateFormat: "Y-M-d",
defaultDate: "today",
maxDate: "today",
locale: {
rangeSeparator: '-'
},
onChange: function(selectedDates, dateStr, instance) {
let today = new Date().toLocaleDateString();
selectedDates.forEach(d => {
if (d.toLocaleDateString() === today) {
d = 'Today'
}
})
}
});