角度 - 日期范围选取器问题

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格式显示开始和结束日期，则只需将其传递给配置选项即可。 如果您使用的是角度日期范围选择器，则可以使用如下所示的代码：

<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 函数来更新日期范围选择器输入字段的模型值。如果你真的想这样做来将价值发布到某个 web api，那么在其他变量上单独做，而不是在日期范围选择器的模型变量上。

如果你真的想在加载时设置日期变量值(最初(，那么开始日期和结束日期保留为日期/时刻对象，而不是字符串(哪个日期过滤器返回(。因此，它可以是：

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

官方文档

更新：普伦克示例