CODEWITHSUNDEEP
javascriptangularjshtmltwitter-bootstrapangular-ui-bootstrap
Martin
Martin

Reputation: 2785

Angular Bootstrap UI, HTML5 date picker and Angular 1.3.0

I'm using a datepicker from Angular Bootstrap UI and it does not work when I change the type attribute to date, thus enabling the HTML5 date-picker. This makes the binded value to the input field be set to undefined once a date is selected with the datepicker. It seems to be working fine with Angular 1.2.x. Has anyone had any familiar issues and a solution to this problem? I've also submitted an issue on their Github site.

Upvotes: 1

Views: 1550

Answers (1)

Martin
Martin

Reputation: 2785

A workaround for this is to add a hidden input field which the Bootstrap datepicker uses. The other HTML5 datepicker does not have anything to do with the Bootstrap datepicker, except they both has the same model as following:

          <input type="date" class="form-control" ng-model="dt" ng-required="true" />
          <input type="hidden" datepicker-popup="yyyy-MM-dd" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" />

Here is a sample Plunker on how I solved this. It is also possible to override the HTML5 datepicker by using ng-click on the date input field.

Upvotes: 2

Related Questions