Bootstrap-datepicker not triggering 'show' event on when I change year for half-yearly calendar

Question

I am using bootstrap-datepickertext for rendering half yearly calendar by manipulating monthly calendar as shown in the code-

`

  $.fn.datepicker.dates['halfyears']={

  days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  daysShort: ["Sun", "Moon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
  months: ["H1", "H2"],
  monthsShort: ["                 H1            " , "                 H2            "],
  today: "Today",
  clear: "Clear",
  format: "mm/dd/yyyy",
  titleFormat: "MM yyyy",
  weekStart: 0
};

let that=this;
$('#date-picker-input').datepicker({
    format: "MM yyyy",
    minViewMode: 1,
    autoclose: true,
    language: "halfyears",
    forceParse: false,
}).on("show", function(event) {
 $(".month").css({"width" : "100%"}).each(function(index, element) {
   if (index > 1) $(element).hide();
 });

 })

`

image of calendar the issue is when I click on left arrow of calendar to change the year 'show' event is not triggered.

Ideally it should be triggered. can you tell what am I missing?