Search code examples
javascriptangularjsangular-ui-bootstrapmomentjsbootstrap-datetimepicker

Bootstrap timepicker gets NaN while increasing or decreasing both hours and minutes


I'm trying to figure why this uib-datepicker always displays NaN while increasing or decreasing both hours and minutes.

    <uib-timepicker ng-model="aliasCtrl.beginning"
                    hour-step="hStep"
                    minute-step="mStep"
                    readonly-input="false"
                    show-meridian="ismeridian"></uib-timepicker>

which is linked with the following controller:

angular.module('app')
  .controller(
    'newController', ['$http', '$uibModalInstance', 'params', function($http, $uibModalInstance, params) {

      var rootScope = this;

      rootScope.begin= params.beg.format('hh:mm');

      rootScope.beginning = new Date();
      rootScope.beginning.setHours(parseInt(this.begin.split(':')[0]));
      rootScope.beginning.setMinutes(parseInt(this.begin.split(':')[1]));
      ...

before any interaction with datepicker it displays precompiled values... params.beg is a Moment.


Solution

  • I just forgot to put the aliasCtrl. at the beginning of both hStep and mStep and this meant that the timepicker didn't know how much to increase or decrease hours and minutes.

    It should be something like:

     <uib-timepicker ng-model="aliasCtrl.beginning"
                    hour-step="aliasCtrl.hStep"
                    minute-step="aliasCtrl.mStep"
                    readonly-input="false"
                    show-meridian="aliasCtrl.ismeridian"></uib-timepicker>
    

    because in my controller I had also rootScope.hstep = 1;, rootScope.mstep = 30; and rootScope.ismeridian = false;

    I didn't figured at once.