Angular UT Bootstrap: set the time to be empty by default

Question

I am using Angular UI Bootstrap ( https://angular-ui.imtqy.com/bootstrap/ ), and in particular I am trying to use timepicker, and although most components have all the settings available, I would not understand how to make timepicker be empty / zero by default, and there are no settings for this, by default the timepicker shows the current time (when the web page is open). I was not sure if there is a way to install this, since there is no component for this?

Answer 1

It is currently not supported and is a known issue: https://github.com/angular-ui/bootstrap/issues/1114 . This is a code fix that should do this.

Answer 2

IMHO, showing the current time for empty values, is a switch for this component. I can not imagine why it has not yet been fixed.

However, there is an idea how to unobtrusively get around this problem.

Disclaimer: the use of the following directive has its drawbacks, and this is not the most pleasant solution, but it is a hack and in order for it to be hacked, it works very well.

app.directive('inputEmpty', function () {
  return {
    restrict: 'A',
    link: function link(scope, element, attributes) {
      setTimeout(function () {//wait for DOM to load
        var inputs = element.find('input');
        inputs.val('');

        scope.$watch(attributes.inputEmpty, function (val) {
          if (!val) { inputs.val('').change(); }
        });
      });
    }
  };
})

Here is a usage example:

<uib-timepicker ng-change="change()" hour-step="1" minute-step="15" show-meridian="true"
  ng-model="value"
  input-empty="value"
></uib-timepicker>