Blog Post - 18. März 2016
bootstrap-datepicker with additional year switch arrows in month view

bootstrap-datepicker with additional year switch arrows in month view

Many of my projects are using bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker). This datepicker works great and it visually integrates perfect with Bootstrap. The only thing that confuses my users very often, is the change of the view mode that shows a month, a year or a whole decade. In each view mode you can navigate to the next month, year or decade with arrow-buttons.

Most of the time I'm using maxViewMode: 0 that only shows the month view but still it would be nice to have arrows to move forward or back for a whole year.

You can add this feature with some small additions or just using the whole patched file from here (https://github.com/sgrosse/bootstrap-datepicker-rails/blob/master/vendor/assets/javascripts/bootstrap-datepicker/core.js). I'm using version 1.5.0, here you can see what I've done in detail.

1. We need to add our new Buttons to the bootstrap-datepicker markup in line 1860- line 1864 of bootstrap-datepicker.js. Therefore change it from:

'<tr>'+
        '<th class="prev">&#171;</th>'+
        '<th colspan="5" class="datepicker-switch"></th>'+
        '<th class="next">&#187;</th>'+
'</tr>'+

To this (I also changed to Font Awesome Icons):

'<tr>'+
        '<th class="prevy"><i class="fa fa-angle-double-left"></th>'+
        '<th class="prev"><i class="fa fa-angle-left"></i></th>'+
        '<th colspan="3" class="datepicker-switch"></th>'+
        '<th class="next"><i class="fa fa-angle-right"></i></th>'+
        '<th class="nexty"><i class="fa fa-angle-double-right"></i></th>'+
'</tr>'+

2. Now extend the case switch in line 1113 with our new buttons, I suggest inserting it in line 1134.

case 'prevy':
case 'nexty':
        var dir = DPGlobal.modes[1].navStep * (target[0].className === 'prevy' ? -1 : 1);
        this.viewDate = this.moveYear(this.viewDate, dir);
        this._trigger('changeYear', this.viewDate);
        this.fill();
        break;

3. We need to extend the function that toggles the visibility in line 1080, in my case there is no maxDate and so I left that one out.

if (this.o.startDate !== -Infinity && year <= this.o.startDate.getUTCFullYear()){
        this.picker.find('.prevy').css({visibility: 'hidden'});
}
else {
        this.picker.find('.prevy').css({visibility: 'visible'});
}

If you need minDate and maxDate you can add this instead

if (this.o.startDate !== -Infinity && year <= this.o.startDate.getUTCFullYear()){
        this.picker.find('.prevy').css({visibility: 'hidden'});
}
else {
        this.picker.find('.prevy').css({visibility: 'visible'});
}
if (this.o.endDate !== Infinity && year >= this.o.endDate.getUTCFullYear()){
        this.picker.find('.nexty').css({visibility: 'hidden'});
}
else {
        this.picker.find('.nexty').css({visibility: 'visible'});
}

4. Now we add our new buttons to the css and that's all.

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .prevy,
.datepicker .next,
.datepicker .nexty,
.datepicker tfoot tr th {
  cursor: pointer;
}
.datepicker .datepicker-switch:hover,
.datepicker .prevy:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker .nexty:hover,
.datepicker tfoot tr th:hover {
  background: #eeeeee;
}