Selected date is undefined with HTML5 datepicker and Angular 1.3.x

[martinmine]

Using Boostrap UI together with any Angular 1.3.x will break compatibility with HTML5 date pickers. Once the date is selected, it will will set the value in the ng-model for the input field to undefined. This works perfectly in Angular 1.2.x.
Working sample with Angular 1.2.28
Broken sample with Angular 1.3.0

[martinmine]

A possible workaround is to use a hidden input field for the bootstrap datepicker with the same ng-model as the HTML5 datepicker. Here is a Plunker sample.

[NicBright]

I've looked a little bit into this, but unfortunately don't have time to come up with a solution and I'm going on vacation for two weeks starting from today.

I think I've identified the underlying problem, i.e. Angular 1.3 introduced support for < input type="date"> (see here: https://github.com/angular/angular.js/blob/v1.3.14/src/ng/directive/input.js#L205). There is now an additional $parser which expects the viewValue to be "yyyy-MM-dd". Unfortunately, ui-bootstrap unshifts its own parser in front of that, and returns a viewValue that's already been converted into a mature date string:

Now when it's time for the new Angular 1.3 < input type="date"> $parser to take over, it thinks that the viewValue is invalid and consequently returns undefined.

Let's step back a little bit and think over this issue:
ui-bootstrap's datepicker and < input type=date> do the same thing just in a different way. In fact the examples given in the plunkers above show this: we have two different buttons to toggle a datepicker, one coming from the browser's native HTML5 implementation, the other one stemming from ui-bootstrap. That just doesn't make sense. I think what a real-world user would expect is that the native HTML5 GUI solution of the browser were completely replaced by Angular UI while still retaining the validation features from the HTML5 < input type="date"> specification.

Nevertheless I suggest to be pragmatic here and to declare datepicker incompatible with < input type="date"> for now, as I expect only a very small group of people using these two in combination, if at all. The goal, after all is to get ui-bootstrap ready for 1.3 as soon as possible.

For the long term, ui-bootstrap should try to get back compatibility by working together smoothly with the new Angular 1.3 < input type="date"> $parser. The best thing (imho) would be to completely replace it and to mirror its functionality. This might not be so easy as I think there is no API (yet?) to smoothly deregister certain $parsers.

[RobJacobs]

If you set the input type to date, you may get a native browser implementation of a date input field so I don't think you should try this. Viewing the plunker samples mentioned above in Chrome shows 2 date pickers (native and ui-bootstrap), Safari presents up/down selection arrows, Firefox and IE don't have any special implementation (yet). My opinion is that this is not a valid use case, we should not support an input type of date.

[wesleycho]

One quick and dirty fix for 1.3 would be to simply not push the parser if attrs.type === 'date - this would be backwards incompatible with 1.2 though unless we want to add angular version sniffing, which I would like to avoid. Alternatively, we could also remove Angular's date parser and maintain that our parser is the truth when using the datepicker.

Thoughts about these approaches?

[chrisirhc]

Closing as this should be fixed via #3499 which has been merged.