AngularUI Bootstrap Datepicker date deselection

Question

I'm using the UI-Bootstrap Datepicker inline for date selection, as shown below.

<datepicker ng-model="profile.available_from" show-weeks="true"></datepicker>

I would like to enable the user to deselect the currently selected date by clicking the same date again.

Eg. the user clicks 29 May 2015, the corresponding tile is highlighted and profile.available_from is updated with the value. If the user now clicks that same date again, the selection highlight should be removed and profile.available_from is set to undefined/null.

Any ideas?

Answer 1

I guess this is not possible without modifying the original source code of datepicker. It would have to check if the field already has the selected value, and if yes, then clear it. Which would complicate the code with no obvious benefit.

I would add clear button instead.

example code (taken from http://angular-ui.github.io/bootstrap/#/datepicker )

$scope.clear = function () {
  $scope.profile.available_from = null;
};