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?
asked May 22, 2015 at 0:23
U.S. Coding Team - Benchwarmer
3571 gold badge12 silver badges30 bronze badges
Add a comment
|
2 Answers
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.
Comments
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>
