Allow null for single date in Date range picker

Question

I am working with angular-date rangepicker . For my requirement I need to have the option to set date as null for start date/end date or both. I looked into its option but didn't find any.

I also have the requirement to show checkbox in calendar popup to set startDate as null and checkbox for set endDate as null.

I found one plunker for setting null, but it sets both date as null/blank Plunker

The plunker uses

 eventHandlers: {
      'cancel.daterangepicker': function(ev, ev1) {
        $scope.datePicker.date = {};
        // $scope.setRange();
        var picker = $element.find('#daterange4').data('daterangepicker');
        picker.setStartDate(new Date);
        picker.setEndDate(new Date);
      }
    }

That clears both date. In my case I want to have option to clear any one date.

Answer 1

Prepare model in your controller. The model must have startDate and endDate attributes:

exampleApp.controller('TestCtrl', function ($scope) {
   //make initial values null
    $scope.datePicker.date = {startDate: null, endDate: null};

    //method to change start date back to null
    $scope.makeStartDateNull = function(){
        $scope.datePicker.date.startDate = null;
    }
}

In HTML you just bind this makeStartDateNull like

<input type="checkbox" ng-model="confirmed" ng-change="makeStartDateNull()" id="ng-change-example1" />

You can do same for the end date.

Answer 2

Have you tried just setting it to null? This is the standard plunker as given by datepicker with the option to set the date to null by:

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

It works on that plunker. I do know there was a bug in earlier versions of datepicker that did what you describe. Check your version.