Bootstrap Datetimepicker - Disable decades view mode

Question

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.

[Check the issue on github](https://github.com/Eonasdan/bootstrap-datetimepicker/issues/1226). — Vucko, Mar 09 '16 at 10:54
As Vucko pointed out, if you don't mind to make a change directly to the library file itself, one can change the min value within showMode function currentViewMode = Math.max(minViewModeNumber, Math.min(2, currentViewMode + dir)); — chri3g91, Sep 28 '18 at 13:54

score 2 · Accepted Answer · answered Mar 09 '16 at 11:34

here is a workaround, thanks to RomeroMsk for this.

CSS:

.datepicker-years .picker-switch {
cursor: default !important;
background: inherit !important;
}

JS:

$('#datetimepicker1').datetimepicker({
// your datetimepicker options go here, f.i.:
        inline: true,
        sideBySide: false,
        format : "DD/MMM/YYYY",
        maxDate : moment()
}).on('dp.show dp.update', function () {
$(".datepicker-years .picker-switch").removeAttr('title')
    //.css('cursor', 'default')  <-- this is not needed if the CSS above is used
    //.css('background', 'inherit')  <-- this is not needed if the CSS above is used
    .on('click', function (e) {
        e.stopPropagation();
    });
});

I tried this workaround in such a way to have only the days mode by changing `$(".datepicker-years .picker-switch")` in `$(".datepicker-days .picker-switch")` but it doesn't work the first time, that is I can select month, year, decade, but if I come back to the day view the month is no more selectable. — Sefran2, May 16 '16 at 20:09

alsobubbly · Answer 2 · 2021-10-01T09:45:36.853

After years of trying to get a workaround for this issue myself, I've finally cracked it.

I have adapted the answer from @Sarpe so that it disables to decades button on load. Sarpe's workaround required the user to click a date before disabling.

$('#datetimepicker1').datetimepicker({
  inline: true,
  sideBySide: false,
  format: 'YYYY-MM-DD',
  maxDate: moment()
});

$(".datepicker-years .picker-switch").addClass('disable').on('click', function(e) {
  e.stopPropagation();
});

.bootstrap-datetimepicker-widget .datepicker-years thead .picker-switch {
  cursor: default !important;
  background: inherit !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<div id="datetimepicker1"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

score 1 · Answer 3 · answered Apr 30 '16 at 10:06

You can do that by making changes to bootstrap-datetimepicker.js as well, this is the simplest way of doing this. All you have to do is open bootstrap-datetimepicker.js in editor -

Find and comment the line -

yearsViewHeader.eq(1).attr('title', options.tooltips.selectDecade);

Just below the line "yearsView.find('.disabled').removeClass('disabled'); " add this line
```
yearsViewHeader.eq(1).addClass('disabled');
```

You can find more elaborated steps at this link

score 1 · Answer 4 · answered Oct 24 '18 at 00:25

1

This one is the best and simple solution.

.datepicker-dropdown .datepicker-years .datepicker-switch, .datepicker-dropdown .datepicker-months .datepicker-switch {
    pointer-events: none;
}

answered Oct 24 '18 at 00:25

Mayur Chauhan

682
1
12
25

score 0 · Answer 5 · answered May 18 '20 at 19:16

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 
                }
            });
        }
    });

score 0 · Answer 6 · answered Apr 15 '22 at 11:12

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

Bootstrap Datetimepicker - Disable decades view mode

6 Answers6