Angular boostrap-ui datepicker dynamically changing minMode

Question

So I have datepicker where changing tabs day/month/year should change minMode of datepicker

 switch($rootScope.tab){

    case 'd':
      $scope.datePicker = 'day';
      $scope.dateOptions = {minMode : 'day'};
      break;
    case 'm':
      $scope.datePicker = 'month';
      $scope.dateOptions = {minMode: 'month', datepickerMode: 'month'};
      break;
    case 'y':
      $scope.datePicker = 'year';
      $scope.dateOptions = {minMode : 'year'};
      break;
    case 't':
      $scope.datePicker = 'none';
      $scope.dateOptions = {minMode : 'none'};
  }

the problem is that datepicker updates fine but dateOptions just ignores minMode and still lets you select day instead of month/year and so. DatePicker in view

<span  
    type="hidden" 
    style="display: none;" 
    class="form-control" 
    datepicker-popup="{{format}}" 
    ng-model="dt" 
    is-open="opened" 
    min-date="{{minDate}}" 
    max-date="{{maxDate}}" 
    datepicker-mode="datePicker"
    datepicker-options="dateOptions"
    ng-required="true" 
    close-text="Close"/>

Is there workaround for this like redrawing datepicker everytime tab changes?(datepicker is outside tabset).

Answer 1

One of the solution I came a cross was to use https://github.com/dalelotts/angular-bootstrap-datetimepicker and then create 3 buttons for showing calendar with different startView(minMode) and minView(datePicker) while using ng-show to show/hide different one of them depending on which tab/button was pressed. Apparently this method doesn't work on bootstrap-ui angular datepicker.