在日期范围选择器中为单个日期保留null

时间:2018-02-20 08:18:12

标签: javascript angularjs bootstrap-datepicker angular-daterangepicker

我正在与angular-date rangepicker合作。根据我的要求,我需要选择将开始日期/结束日期或两者的日期设置为空。我调查了它的选项,但没有找到任何选项。

我还要求在日历弹出窗口中显示复选框,将startDate设置为空,将endDate设置为空。

我找到一个用于设置null的plunker,但它将date设置为null / blank Plunker

plunker使用

 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);
      }
    }

清除这两个日期。在我的情况下,我希望有选择清除任何一个日期。

2 个答案:

答案 0 :(得分:2)

在控制器中准备模型。该模型必须具有startDate和endDate属性:

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;
    }
}

在HTML中,您只需绑定此makeStartDateNull,如

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

您可以为结束日期执行相同操作。

答案 1 :(得分:0)

您是否尝试过将其设为null? 这是standard plunker as given by datepicker,可以选择将日期设置为null:

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

它适用于那个plunker。 我知道早期版本的datepicker中有一个错误就是你所描述的。检查你的版本。