JSFiddle - React, Tailwind, and code Playground
HTML
<p>Date:
<input type="text" id="datepicker" />
</p>
JavaScript
$(function () {
var startDate = new Date();
var endDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
var calDate = $("#datepicker");
var panelButtons = function(input) {
setTimeout(function() {
var curDate = startDate;
var yearSelect = $(calDate).datepicker("widget").find(".ui-datepicker-year");
var monthSelect = $(calDate).datepicker("widget").find(".ui-datepicker-month");
var titlePanel = $(calDate).datepicker("widget").find(".ui-datepicker-title");
monthSelect.hide();
yearSelect.hide();
var customSelect = $('<select />').attr('id', 'customrange')
.attr('class', 'ui-datepicker-custom')
.attr('data-event', 'change')
.attr('data-handler', 'selectMonth')
.css('width', '140px');
customSelect.appendTo(titlePanel);
while (curDate <=endDate) {
var curMonthNumber = (parseInt(curDate.getMonth()) + 1);
var curDateValue = (curMonthNumber < 10 ? '0' + curMonthNumber : curMonthNumber) + '-' + curDate.getFullYear();
if ($('#customrange option[value="' +curDateValue+ '"]').length == 0) {
customSelect.append($("<option></option>").attr("value", curDateValue).text(curDateValue));
}
curDate.setTime(curDate.getTime() + 86400000);
}
customSelect.change(function(){
var selectedValue = customSelect.val().split("-");
var selectedYear = parseInt(selectedValue[1]);
var selectedMonth = parseInt(selectedValue[0]);
var date = new Date(selectedYear, selectedMonth - 1, 1);
//$(calDate).datepicker('disable');
//$(calDate).datepicker({ defaultDate: '' });
//$(calDate).datepicker('option',...