Manually typed date and min/max dates

[yannbertrand]

Bug description:

This can be demonstrated with the datepicker popup on the angular ui site by following the steps below: http://angular-ui.github.io/bootstrap/#/datepicker

1. Ensure the min date option is turned on (min date should equal today)
2. Type in yesterdays date to the datepicker-popup

This shows a red border around the inline datepicker (as it is flagged as ng-invalid-date) however the input box for the datepicker-popup is still valid.

On further investigation it seems that the ng-invalid-date attribute has been set against the popup part of datepicker and not against the input box. This causes issues because firstly, the user cannot see that the element is invalid and secondly the popup does not have a name property so I am unable to check validity from the ng-form (e.g. myForm.myDate.$invalid

Link to minimally-working plunker that reproduces the issue:

See http://stackoverflow.com/questions/23542354/angularui-datepicker-popup-manually-typed-date-and-min-max-dates

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.5

UIBS: 0.14.3

Bootstrap: 3.3.4

[icfantv]

@yannbertrand just a heads up that you entered UIBS 0.14.3 which is quite old.

Are you suggesting we put the red border around the calendar icon as well?

[yannbertrand]

Thanks for the info!

I'm suggesting that min and max dates should be verified when one enter them manually (not only by clicking onto the calendar).

This is what I would expect:

[icfantv]

I'm not following. Are you saying that when a user enters a date manually, we are not checking it against the min/max date values (if any)?

[yannbertrand]

Absolutely! May it be because of an outdated version?

[icfantv]

That may be, but you're testing against our demo site, which means it's the latest, RELEASED version. I'll have to look and see what's been fixed since.

[yannbertrand]

You can reproduce this on the datepicker popup section.

1. Click on the "Min date" button to set the min date to yesterday.
2. Try to select yesterday in the datepicker -> impossible
3. Change the day manually (inside the input) -> no check that this date is correct

[readme42]

I confirm: Manually entered (typed) dates in inputs with datepicker-popup, which are outside minDate/maxDate-restrictions, will not mark the input as invalid. (still ng-valid / ng-valid-date instead of ng-invalid / ng-invalid-date).

Can be reprocuded with current documentation as said in the comment above.

@icfantv is still more info needed? There is another issue in which i referenced this one. Seems to be a duplicate.

[Dinistro]

@icfantv I found the cause for this and #6213

The min/max validation is placed in the datepicker and not in the datepickerPopup. Unfortunately the datepicker isn't initialized until the popup is opened (ng-if="isOpen": https://github.com/angular-ui/bootstrap/blob/master/template/datepickerPopup/popup.html#L1).

Additionally the datepicker validation only applies its error on the own ngModuleCtrl and not on the one from the popup (not the same ngModelController).

To fix this, I think we have to add min/max-validation in the popup itself. Perhaps something similar to this:

[
  'minDate',
  'maxDate'
].forEach(function(key){
  $scope.$watch('datepickerOptions.' + key, function(value) {
    minMaxValidation(ngModel.$modelValue);
  });
});

//Perhaps move this to $validators? 
ngModel.$parsers.push(function(date) {
  minMaxValidation(date);
  return date;
});

function minMaxValidation(date) {
  ngModel.$setValidity('dateDisabled', !date || !$scope.isDisabled(date));
}

[wesleycho]

@Dinistro your finding that it is likely due to the ng-if is likely correct - I am noticing some funky behavior in a Plunker I just created here. The initial min date is not being respected.