JSFiddle - React, Tailwind, and code Playground
HTML
<html lang="en">
<body>
<button class="button">Clear</button>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
JavaScript
var tmpdate, startDate, endDate, dateRange = [];
$(function() {
$("#datepicker").datepicker({
defaultDate: +14,
onSelect: function(date) {
tmpdate = new Date();
startDate = tmpdate.setDate(tmpdate.getDate() - 3);
endDate = tmpdate.setDate(tmpdate.getDate() + 14);
dateRange = [];
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
}
return dateRange;
},
dateFormat: 'yy-mm-dd',
beforeShowDay: disableDates
});
$(".button").click(function(event) {
$('#datepicker').datepicker('setDate', null);
});
});
var disableDates = function(dt) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', dt);
return [dateRange.indexOf(dateString) == -1];
}