Adding click event on date selection angular-ui bootstrap

Question

I want to perform some action whenever the user selects a date in the angular-ui datetimepicker.

    <input type="text" class="form-control" 
        uib-datepicker-popup="{{dashctrl.format}}" 
        ng-model="dashctrl.checkOutDtDashboard" 
        is-open="dashctrl.popup2.opened" 
        datepicker-options="dashctrl.dateOptionsCheckOut" 
        ng-required="true" 
        close-text="Close" 
        alt-input-formats="dashctrl.altInputFormats" />

The controller is like: DashController as dashctrl

In the relevant controller where my calendar drops out, there are dates which I can select, and post selection of date, I want to perform some action.

There's already an select(dt.date) method written on dates selection in the library but how do I use it in my controller.

I tried using

1. $rootScope.select
2. $scope.select

but these are not working in my code.

Answer 1

You could put an ng-change on the input and have it map to a function on your controller. This will fire after the user selects a date in the datepicker. It doesn't sound like you are trying to override the functionality of the datepicker select, so I think this should work.

Answer 2

Register a $watch in your datepicker ng-model in your DashController controller:

$scope.$watch('checkOutDtDashboard', function(newDate) {
    if (newDate) {
        console.log("Got the new date", newDate, "or", $scope.checkOutDtDashboard);
    }
});