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

前端之家收集整理的这篇文章主要介绍了angularjs – 如何使用ng-model格式化一个日期?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个输入定义为 @H_301_1@<input class="datepicker" type="text" ng-model="clientForm.birthDate" />

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

@H_301_1@<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?

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

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

@H_301_1@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() : ""; }); } }; }); @H_301_18@ 原文链接:https://www.f2er.com/angularjs/146927.html

猜你在找的Angularjs相关文章