I am using Tempus Dominus date picker in a way that only shows months and years. And I also disable certain months, 2020-06
in the following example. When I click on the disabled month it doesn't select it as expected. But is it possible to grey it out and prevent clicking on it in the first place?
new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),
{
restrictions: {
minDate: "2020-01",
maxDate: "2020-12",
disabledDates: ["2020-06"],
enabledDates: [],
daysOfWeekDisabled: [],
disabledTimeIntervals: [],
disabledHours: [],
enabledHours: []
},
display: {
icons: {
type: 'icons',
time: 'fa-solid fa-clock',
date: 'fa-solid fa-calendar',
up: 'fa-solid fa-arrow-up',
down: 'fa-solid fa-arrow-down',
previous: 'fa-solid fa-chevron-left',
next: 'fa-solid fa-chevron-right',
today: 'fa-solid fa-calendar-check',
clear: 'fa-solid fa-trash',
close: 'fa-solid fa-xmark'
},
sideBySide: false,
calendarWeeks: false,
viewMode: 'calendar',
toolbarPlacement: 'bottom',
keepOpen: false,
buttons: {
today: false,
clear: false,
close: false
},
components: {
calendar: true,
date: false,
month: true,
year: true,
decades: true,
hours: false,
minutes: false,
seconds: false
},
inline: false,
theme: 'auto'
},
stepping: 1,
viewDate: "2020-01",
useCurrent: true,
defaultDate: undefined,
keepInvalid: false,
debug: false,
allowInputToggle: false,
multipleDates: false,
multipleDatesSeparator: '; ',
promptTimeOnDateChange: false,
promptTimeOnDateChangeTransitionDelay: 200,
meta: {},
container: undefined
}
)
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.2.10/dist/js/tempus-dominus.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.2.10/dist/css/tempus-dominus.min.css" rel="stylesheet"/>
<input type="text" id="datetimepicker1">