Some pain with ui bootsrap datepicker and angular-validation

[rluiten]

Hi, I am back again, hope you aren't groaning to loud.
Using datepicker from https://angular-ui.github.io/bootstrap/, 0.13 or 0.13.2 both do it so far.
Angular v1.3.13

Plunker - http://plnkr.co/edit/ykWiwvOJbNvKYdVwXrhY?p=preview

If you select a valid date, after the validation timeout it flags it as invalid, if you leave the field causing the blur to trigger it clears the error, but does not clear it until you leave.

The problem also occurs if i just paste a valid date into that example not use the datepicker function directly. Or type a valid date in it will bring up error. If I edit the date once error is up it will clear the error once the edited date is valid again. If I leave the field [blur] with error up it will clear the error, but the error will not go away if i don't do something.

Here is the spanner in the works. If I remove datepicker from that plunker entirely pasting in a valid date does not cause the validation error to come up.
No Error Plunker without datepicker - http://plnkr.co/edit/yBZZFzTiVOmPaDwlAAYL?p=preview

I can fully understand if it may not be something you can influence, however I suspect datepicker may be in wide spread use it may come back to haunt you later :).

[ghiscoding]

Looks like you're a good beta tester...tssss

So here is the problem, the validate() always assumed that the given value is/was a String, but it looks like AngularUI is actually passing directly a Date object. So my function was doing these steps:

1- looking if the String was well formed, following ISO format or whichever type you chose, through the Regex pattern defined in the validation-rules.js
2- then after step1 is checked, parse the String into a Date object
3- and finally I was then able to do the validation by comparing the 2 Date objects

Since AngularUI is already passing a Date object, the step#1 is failing and isn't going further. To fix this problem, I'm simply checking directly if it's a Date object (if so, go directly to step3) or if it's a String then keep doing the well formed check and so on (step 1 to 3).
I will push a fix in few minutes after all Protractor tests are checked.

And by the way, personal taste, I always found the AngularUI datepicker to be a little ugly. I prefer to use the Bootstrap DateTimePicker of smallot. Though I had to build a very short and simple Directive for it to work, but it's quite simple.

[ghiscoding]

Took your plunker sample and duplicated it in my more-examples folder for debugging.

I was actually waiting for a change to make my Revision number more in line with AngularJS branch, so I'm now in the 1.4.0 branch :)

[rluiten]

That seems to fix it fine.

Just noticed a related problem, paste "28/07/2015" its a valid date at the moment, now backspace and remove the 5 from end, it does not flag an error until you leave [blur] the field.
Not a deal breaker for me, but looks untidy :)
Cheers, Rob.

[ghiscoding]

The datepicker is interfering with Angular-Validation, if you remove the datepicker by taking out this line datepicker-popup="{{vm.datePickerFormat}}", then it works as intended. It's most probably related to the fact that I use the $formatters and the $parsers to attach the validation, but it looks like the datepicker is taking the same and has some kind of priority. Since the onBlur is also attached to the input by Angular-Validation, that is the only 1 event left to catch the validation, hence why it shows the validation at that time.

So like I said, remove the datepicker and you will see it works, but how to fix it this problem? I just don't know how... if you know how, then please tell me.

[ghiscoding]

Actually if I put the $formatters and the $parsers inside a $timeout it removes this effect, the reason being that it push everything to the end of the digest cycle. But it's a patch, I'm not crazy about patches... though it works, I'll see if the rest of my Protractor test works too.

[ghiscoding]

Hopefully this is the last fix