Question

我正在尝试使日期范围功能正常运行。当前，当我尝试选择一个日期时，它可以选择该日期，但是当我单击“应用”时，它将变为无效的日期。

我的代码如下：

AngularJS：

     $scope.SimplePickerChange = function () {
        $scope.date = {
            startDate: $filter("date")(new Date(), 'yyyy-MM-dd'),
            endDate: $filter("date")(new Date(), 'yyyy-MM-dd'),
        };
    };

HTML：

<input date-range-picker
                                   id="date"
                                   name="date"
                                   class="form-control date-picker"
                                   type="text"
                                   ng-model="date"
                                   ng-change="SimplePickerChange();"/>

Answer 1

为什么要使用过滤器更改模型值？如果要在输入字段中以yyyy-MM-dd格式显示开始和结束日期，则只需将其传递给配置选项即可。如果您使用的是angular-daterangepicker，则可以使用以下代码：

<input date-range-picker class="form-control date-picker" type="text" ng-model="date"
 options="options" />

其中的选项是：

$scope.options = {
      applyClass: 'btn-green',
      locale: {
        applyLabel: "Apply",
        fromLabel: "From",
        format: "YYYY-MM-DD", //will give you 2017-01-06
        //format: "D-MMM-YY", //will give you 6-Jan-17
        //format: "D-MMMM-YY", //will give you 6-January-17
        toLabel: "To",
        cancelLabel: 'Cancel',
        customRangeLabel: 'Custom range'
      }
    }

因此，只是不要使用ng-change函数来更新daterangepicker输入字段的模型值。如果您真的想这样做，以将值发布到某个Web api，请分别对其他变量而不是对daterangepicker的模型var进行处理。

如果您真的想（首先）在加载时设置日期变量值，则将开始日期和结束日期保留为日期/时刻对象，而不是字符串（日期过滤器返回）。因此，可以是：

$scope.date = {
    startDate: new Date(),
    endDate: new Date()
  };

Official Docs

更新：Plunker Example

AngularJS-日期范围选择器问题

1 个答案: