When the user clicks on the view header multiple times the expected behaviour is: days -> months -> years -> decades. I need to disable the decades view (screenshot attached). Doing so the user cannot go further 'year' view mode.
6 Answers
This one is the best and simple solution.
.datepicker-dropdown .datepicker-years .datepicker-switch, .datepicker-dropdown .datepicker-months .datepicker-switch {
pointer-events: none;
}
This worked for me using the Bootstrap Datepicker
$('#datetimepicker1').datepicker({
format: 'DD-MM-YYYY'
}).on('show', () => {
const decadesDiv = document.querySelector(".datepicker-decades");
if (decadesDiv) {
decadesDiv.firstElementChild.firstElementChild.childNodes.forEach((tr,idx)
=> {
if (idx === 0)
tr.style.visibility = "hidden";
else {
tr.children[1].addEventListener('click', (e) => {
e.stopPropagation() });
//tr.children[1].style.visibility = "hidden"; //optional CSS
}
});
}
});
Well for me MaxViewMode worked like a charm. By default, it is set as 4 but we can change it acc. to our preference
days(0) -> month(1) -> year(2) -> decade(3) -> century(4)
MaxViewMode: 2 - to limit users to go up to years view mode
my code to limit users to go only till year
$('#Datepicker').datepicker('destroy').datepicker({
todayHighlight: true,
endDate: endDate,
maxViewMode: 2
Here is the documentation https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#maxviewmode
Related