Md-datepicker not showing validation errors when minDate is changed/dynamic

Question

I'm using angular-materials datepicker. I have scenario where min-date for one datepicker is set to model of another. What I've noticed is that validation on the picker with 'dynamic' min-date is not triggered after change of the date in the first one.

The set up :

<h4>Standard date-picker</h4>
<md-datepicker ng-model="minDate" md-placeholder="Enter date"></md-datepicker>
<h4>Date-picker with min date set to first picker</h4>
<md-datepicker ng-model="myDate" placeholder="Enter date"
             md-min-date="minDate"></md-datepicker>

Plunker with this setup.

When I change date in first picker to be after the date in the second one. Picker with min-date should be in invalid state. Interesting thing is that second picker picks up the min-date as the dates before min-date are disabled in calendar view.

Is that a bug? Is there a workaround that ?

Cyril Cherian Cyril Cherian · Accepted Answer · 2015-11-30T11:55:04

I have put a $watch which will check if the minDate is below the myDate if yes then reset the myDate to minDate.

$scope.$watch('minDate', function(newValue, oldValue){
  if (oldValue != newValue){
    if (newValue >   $scope.myDate){
      $scope.myDate = newValue;//reset the myDate with new Value of minDate
    }
  }
});

Working code here

Hope this helps!

Md-datepicker not showing validation errors when minDate is changed/dynamic

1 Answers