angularjs – 如何使用ng-model格式化一个日期？

发布时间：2020-12-17 09:09:26 所属栏目：安全来源：网络整理

导读：我有一个输入定义为 input class="datepicker" type="text" ng-model="clientForm.birthDate" / 它被装配到页面上的其他位置显示： tr thBirth Date/th td{{client.birthDate|date:'mediumDate'}}/td/tr 当页面加载出生日期很好地格式化为像12月22日，2009年

我有一个输入定义为

<input class="datepicker" type="text" ng-model="clientForm.birthDate" />

它被装配到页面上的其他位置显示：

<tr>
    <th>Birth Date</th>
    <td>{{client.birthDate|date:'mediumDate'}}</td>
</tr>

当页面加载出生日期很好地格式化为像12月22日，2009年。但是，当我看看我的< input>它显示为Tue Dec 22 2009 00:00:00 GMT-0800(太平洋标准时间)，我想是如何JS将Date对象作为字符串。

首先，我如何告诉Angular在< input>像12/22/2009？我似乎不适用| ng-model属性中的过滤器。

其次，一旦我编辑日期，即使将其保持为原始格式，我的其他文本(在< td>内)似乎不再应用|日期过滤器了;它突然改变格式以匹配输入文本框的格式。我如何让它每次模型更改应用|日期过滤器？

相关问题：

> How do I get my directive to only fire on onchange?
> How to access arguments in a directive?

使用表单 http://docs.angularjs.org/guide/forms的自定义验证演示： http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview

使用格式器和解析器的指令和MomentJS)

angModule.directive('moDateInput',function ($window) {
    return {
        require:'^ngModel',restrict:'A',link:function (scope,elm,attrs,ctrl) {
            var moment = $window.moment;
            var dateFormat = attrs.moDateInput;
            attrs.$observe('moDateInput',function (newValue) {
                if (dateFormat == newValue || !ctrl.$modelValue) return;
                dateFormat = newValue;
                ctrl.$modelValue = new Date(ctrl.$setViewValue);
            });

            ctrl.$formatters.unshift(function (modelValue) {
                if (!dateFormat || !modelValue) return "";
                var retVal = moment(modelValue).format(dateFormat);
                return retVal;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var date = moment(viewValue,dateFormat);
                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
            });
        }
    };
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!