Инициировать изменения месяца и года в материале начальной загрузки datetimepicker

Question

Я использую инструмент выбора календаря начальной загрузки от T00rk с дизайном начальной загрузки материала FezVrasta. Я пытаюсь расширить его функциональность, например, добавить раскрывающиеся опции для месяцев и лет (успешно интегрированные в календарь), однако не могу связать изменения с месяцем и годом (когда вы выбираете месяц и год из раскрывающихся вариантов), Да, текст месяца и года изменяется, когда вы выбираете из выпадающего списка, но эти изменения не отражают текущую активную дату, какие-либо идеи, помощь, подсказки, пожалуйста?

ПРИМЕЧАНИЕ: вот модифицированный календарь выбора js

$(document).ready(function() {
  $(".thehide").hide();
  //initialize the material design
  $.material.init();
  $.material.ripples();
  $('.datepicker').bootstrapMaterialDatePicker({
    weekStart: 0,
    time: false,
    format: 'MMMM DD, YYYY'
  });
});

.padding_15px {
  padding: 15px;
}
.shadow-z-1 {
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}
.d_dp {
  position: absolute;
  z-index: 999999999;
}
.d_dp,
.d_dp {
  list-style: none;
}
.d_dp a {
  display: block;
  padding: 4px 0px;
  font-size: 13px;
  color: #555555;
  text-decoration: none;
}
.bg_white {
  background-color: #ffffff;
}
.radius_3px {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.thehide {
  display: none;
}

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- bootstrap 3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- material design for bootstrap -->
<link type="text/css" rel="stylesheet" href="http://fezvrasta.github.io/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link type="text/css" rel="stylesheet" href="http://fezvrasta.github.io/bootstrap-material-design/dist/css/ripples.min.css">
<!-- google icons and roboto -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- momentjs -->
<script type="text/javascript" src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
<!-- material design scripts -->
<script type="text/javascript" src="http://fezvrasta.github.io/bootstrap-material-design/dist/js/material.js"></script>
<script type="text/javascript" src="http://fezvrasta.github.io/bootstrap-material-design/dist/js/ripples.min.js"></script>
<!-- material datepicker -->
<link rel="stylesheet" type="text/css" href="http://t00rk.github.io/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css">
<!-- datepicker script -->
<script type="text/javascript" src="https://microfinanceconsult.com/datepicker.js"></script>

<input type="text" class="datepicker form-control" placeholder="Click to select time...">