我有一个输入定义为
<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对象呈现为字符串。
Dec 22, 2009
<input>
Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)
Date
首先,我如何告诉Angular将日期显示<input>为12/22/2009?我似乎无法|filters在ng-model属性内应用。
12/22/2009
|filters
ng-model
其次,一旦我编辑了日期,即使将其保留为原始格式,我的其他文本(位于中<td>)似乎也不再应用|date过滤器;它突然更改了格式以匹配输入文本框的格式。如何在|date每次模型更改时应用过滤器?
<td>
|date
使用表单的自定义验证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() : ""; }); } }; });