[SOLVED] I am locked zoomed out in date picker

I am locked zoomed out in date picker

I actually tried to restrict users to pick dates within 2 years from today in Datepicker. So now there is one issue that is coming up that when in zoom out too much (By zooming out I mean when we click on the month name it will zoom out to all months and and similarly all month to all year) this is the zooming out I am talking about

but if I zoom out to such an extent where it shows the calendar in group of a decade or a century I am not able to zoom in back or I mean not able to go back to the calendar view where I could select dates.

so is there a way to restrict users to zoom out after a level? or is there a way to fix it?

My datepicker version is Bootstrap v4.1.1

This is the code we are using

tz_today Is today's date in yyyy-mm-dd format.

endDate = new Date(new Date().setFullYear(new Date().getFullYear() + 2)); pickDate = new Date(pickDate); // in yyyy-mm-dd format

$('#Datepicker').datepicker('destroy').datepicker({

        todayHighlight: true,

        beforeShowDay: function (date) {

            $highlight = calendar_highlight_classes(highlight_dates, pickDate, date);

            return $highlight;

        }

    }).datepicker('setStartDate', new Date(tz_today))

        .datepicker('setEndDate', endDate);

Solution

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