ui.bootstrap.datepicker Clear button event

Question

Currently using https://angular-ui.github.io/bootstrap/#/datepicker

How can I hook up the clear button so that when it is clicked, I can be notified?

I like to something like when Clear button clicked, change the textbox value.

Answer 1

Have you tried looking at "edit in plunkr" on the link you provided? The code is super easy...

HTML

<datepicker ng-model="dt"></datepicker>
<button type="button" ng-click="clear()">Clear</button>

JS

$scope.clear = function () {
    $scope.dt = null;
    // do something else...
};

Answer 2

How about if you apply $watch on the model your date is attached to?

$scope.$watch('dt', function(){
    //do something
});

Since once the Clear button is triggered, it will affect the model.

Answer 3

Following on from the answer above, you can detect that Clear has been clicked by using $scope.$watch as follows:

$scope.$watch('dt', function(newValue, oldValue) {
   if (newValue=== null) {
      // Clear has been clicked
   }
});