Material: Attempting reset/clear a selected date from md-datepicker?

[kiranthadathil]

I have a search form with md-datepicker's on it. The form having 'Search' and 'Clear' buttons.

If we select any dates from the md-datepicker and click Clear button it will clear selected date as shown below

_Clear function: _
clear = function () {
let ctrl = this;
ctrl.searchCriteria.begindate = null;
ctrl.searchCriteria.enddate = null;
}

html:
`

     <md-datepicker flex ng-model="sCtrl.searchCriteria.begindate" md-placeholder="Begin Date"></md-datepicker>

If I enter an invalid date manually(ex:786/786/786) and hit the Clear button on the form it wont clear the dates from the respective fields.

I have googled a lot on this issue, but couldn't find a proper solution on this issue. Any help would really be appreciated.

Thanks

[crisbeto]

@kiranthadathil Are you sure it's not something with your own code? Here's the fiddle that I'm using to try and reproduce this but it seems to be working fine: http://codepen.io/crisbeto/pen/LNBBye. And here's the steps that I'm taking:

1. Select a valid date.
2. Enter some random text that isn't a valid date.
3. Click the "Clear" button.

At this point the model value is properly set to null in the controller.

[kiranthadathil]

Thanks for the feedback..Yes you are right in the case of selecting valid date..And here steps that i'm taking:

1. Select a valid date
   2.Click the "clear" button to clear the valid date.
   3.Please enter manually 04/34/2016.
   4.Click the"Clear" button ...it won't clear the manually entered date.

[crisbeto]

Thanks now I got it.

[crisbeto]

@kiranthadathil the datepicker seems to work as intended. The input value doesn't get cleared, because the first time you cleared it, the model value got set to null. Next time you enter an invalid date, the model value is still null. This means that Angular can't detect a change in the value and fire off the necessary functions. I don't think we can do anything on Material's side, but there's an easy workaround for you. You just need to broadcast a md-calendar-change event in your reset function and input value will be updated properly:

$scope.$broadcast('md-calendar-change', $scope.myDate);

Here's an updated codepen which works as intended.

[kiranthadathil]

Thanks a lot ..Its works fine now with $broadcast.