CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
U.S. Coding Team - Benchwarmer
U.S. Coding Team - Benchwarmer

Reputation: 357

Angular UI Bootstrap: Set timepicker to be empty by default

I'm using the Angular UI Bootstrap (https://angular-ui.github.io/bootstrap/) and specifically I am trying to use the timepicker, and though most components have every setting available that you would want, I have not figured out a way to get the timepicker to be empty/null by default, and there is no setting to do this, by default the timepicker shows the current time (when the webpage opened). I wasn't sure if there was a way to set this since there isn't a component setting for this?

Upvotes: 4

Views: 5665

Answers (2)

Boris D. Teoharov
Boris D. Teoharov

Reputation: 2388

IMHO showing current time for empty values is a deal breaker for this component. I cant imagine why it had not been fixed yet.

However, here is an idea of how to work around this problem unobtrusively.

Disclaimer: Using the following directive has its drawbacks and it is not the prettiest solution but it is a hack and for it being a hack it works pretty 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 an example usage:

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

Upvotes: 1

Wayne Ellery
Wayne Ellery

Reputation: 7958

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

Upvotes: 1

Related Questions