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

Question

我有一个输入定义为

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

它被设置为显示在页面的其他位置:

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

当页面加载时，出生日期的格式很好，如 Dec 22, 2009 。然而，当我查看我的<input>内部时显示为Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)我猜这就是 JS 渲染的方式 Date作为字符串的对象。

首先，我如何告诉 Angular 在 <input> 中显示日期就像 12/22/2009 ？我好像无法申请|filters里面ng-model属性。

其次，一旦我编辑日期，即使保留其原始格式，我的其他文本( <td> 内)似乎也不适用 |date不再过滤；它突然改变格式以匹配输入文本框的格式。我如何才能应用 |date每次模型更改时都进行过滤？

<小时/>

相关问题:

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

Answer 1

使用表单的自定义验证 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() : "";
            });
        }
    };
});