Material: datepicker: If the md-min-date value changes, the validation does not update

[leavelbw]

I have created the following plunkr, by changing the date picker demo plunkr:

http://codepen.io/BobLeavell/pen/zqPKyp

To reproduce:

1. Set the date for the "Standard date-picker" to 7/15/2015
2. View that the validation for the "Date-picker with min date and max date" triggers to false
3. Verify the Min/Max dates at the top of the form
4. Click the Update Min/Max button
5. See that the validation has not changed, although the date lies within the min and max dates.
6. Click calendar icon for the "Date-picker with min date and max date"
7. Click on 7/15/2015
8. View that the date is now shown to be valid.

If the date is valid, and the md-min-date changes such that it is no longer valid, the validation does not update.

[ngraef]

See #5938

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

[jbdemonte]

What is the status on this problem, it seems we are facing the same issue,
And there, it is marked as deprecated, md-min-date is not supposed to be updated?

[thevictor13]

@jbdemonte, see https://github.com/angular/material/issues/5938#issuecomment-206503563 for a workaround.
Alternatively you can avoid the $watch by implementing the same workaround using getters and setters.

[jbdemonte]

In our case, we are changing both the date & the min-date, and it seems to be the previous min-date which is used to validate the new date, our code is using model getterSetter, I don't know if it has a role in the problem, my workaround was to update the date using a $timeout of 100ms, to let the min-date be propagate

[stephengardner]

In my case, I was having a preset range picker set both dates.
When they both updated from something like "This Month" to "Last Month", the ending date picker would throw that red line error.

As @jbdemonte mentioned, you can use a timeout here.
something like

endDate = new Date(...);
$timeout( () => { 
  startDate = new Date(...);
});

You only need the timeout for the date causing the validation issue, and the timeout can be null, angular will still force that digest loop after the current one is finished.

[menelai]

1. this.d = this.$element.find('md-datepicker').data();
2. this.d.$mdDatepickerController.updateErrorState();

[Splaktar]

Verified that this issue still exists in 1.1.9. Updated CodePen. This is a pretty basic use case that is expected to work.

[Splaktar]

This is not yet implemented in 1.1.22 based on this updated CodePen. We don't have watchers on these values to trigger validation. We should look into whether we can add this w/o penalizing everyone who uses these APIs (with extra unwanted watchers) I.e. only add watchers if necessary/requested.