1

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.

William-H-M
  • 1,050
  • 1
  • 13
  • 19
Anita
  • 2,352
  • 2
  • 19
  • 30

2 Answers2

2

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.

Colin
  • 174
  • 1
  • 9
  • ng-change="makeStartDateNull()" will work on change of value. I want to set conditionally using some input checkbox in calendar popup view. – Anita Feb 20 '18 at 08:59
0

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.

DeclanMcD
  • 1,518
  • 4
  • 22
  • 41