md-datepicker must be a Date instance 错误

Question

我这里有问题。我想在我的模态表单中使用 Angular Material datepicker。我只是像这样将它添加到我的表单中

<md-datepicker ng-model="new.warranty" md-placeholder="Enter date"></md-datepicker>

如果我提交表格，我会得到这个：

Sun Apr 03 2016 00:00:00 GMT+0300 (EEST)

但我想在发送前将数据转换成yyyy-MM-dd格式，所以我尝试用这种方式转换日期格式

data.warranty = $filter('date')(Date.parse(data.warranty), 'yyyy-MM-dd');

所以我的表单只发送了所需的 yyyy-MM-dd 格式，但每次提交表单时我都会收到错误消息。

`The ng-model for md-datepicker must be a Date instance. Currently the model is a: string`

所以，如果可能的话，请问我如何在不使用 moment.js 的情况下避免这个错误。

Answer 1

当您在 data.warranty 上使用 $filter('date') 时，您将其从 Date 对象转换为 String，因此出现错误。

选项 1

解决此问题的最快方法是将日期值复制为字符串：

<md-datepicker ng-model="new.warrantyDate" md-placeholder="Enter date"></md-datepicker>

无论何时提交表单，在提出请求之前，将日期转换为您需要的格式，但不要覆盖现有日期:

data.warranty = $filter('date')(Date.parse(data.warrantyDate), 'yyyy-MM-dd');

因此，您的 warrantyDate 值将仍然是一个 Date 对象并将继续工作。如果您修改回复中的日期，请不要忘记将 warrantyDate 与修改后的日期同步。

选项 2

您可以尝试的另一个选项是创建一个指令，该指令将对您的 data.warranty 变量具有不同的 $modelValue 和 $viewValue。有关如何实现此目的的更多信息，请参阅 ngModelController 上的 documentation。

第二个选项需要更深入地了解 angular 的工作原理，因此如果您正处于 angularjs 路径的最开始，您可能会选择第一个选项。

Answer 2

我已经通过覆盖 md-datepicke 解决了这个问题 ,这是代码

 .directive('mdDatepicker', function ($parse) {

    return {
        require: 'ngModel',
        link: function (scope, elem, attr, ngModel) {
            $parse(attr.ngModel).assign(scope, new Date(_.get(scope, attr.ngModel)));
        }
    }
})

md-datepicker must be a Date instance 错误

md-datepicker must be a Date instance Error

javascript

date

angularjs

angular-material

选项 1

选项 2