如何使用ng-model格式化日期？
如何使用ng-model格式化日期？
提问于 2013-01-23 15:35:18
我有一个输入定义为
<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的形式显示日期？我似乎不能在ng-model属性中应用|filters。
其次，一旦我编辑了日期，即使保持它的原始格式，我的其他文本(在<td>中)似乎不再应用|date过滤器；它突然改变格式以匹配输入文本框的格式。如何让它在每次模型更改时都应用|date过滤器？
相关问题：
回答 8
Stack Overflow用户
回答已采纳
发布于 2013-01-23 17:02:47
使用表单的自定义验证http://docs.angularjs.org/guide/forms演示：http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview
使用格式化程序和解析器以及 的指令)
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() : "";
});
}
};
});Stack Overflow用户
发布于 2015-04-15 18:01:07
下面是一个非常方便的指令angular-datetime。你可以这样使用它：
<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate">它还会向您输入添加掩码并执行验证。
Stack Overflow用户
发布于 2014-04-20 03:00:26
我已经创建了一个简单的指令来使标准input[type="date"]表单元素能够在AngularJS ~1.2.16中正常工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14474555
复制相关文章
相似问题