javascript 如何在 ng-model 中使用日期过滤器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26020266/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use a date filter in ng-model?
提问by user3648646
This seems like it should be simple but it has eluded me. I would like to convert my date string to a date object and filter how it is displayed.
这看起来应该很简单，但它让我望而却步。我想将我的日期字符串转换为日期对象并过滤它的显示方式。
I have a simple angular app and controller
我有一个简单的角度应用程序和控制器
myApp.controller('myAppCtrl', function($scope) {
$scope.MyDate = Date("2014-09-23T15:26:49.1513672Z");
})
I have JSON returned from the server and the date I am working with is a string in the above format
我从服务器返回了 JSON，我使用的日期是上述格式的字符串
from the angular documentation about date filters
来自关于日期过滤器的角度文档
<span>{{1288323623006 | date:'medium'}}</span><br>
this works and the out put is: Oct 28, 2010 8:40:23 PM
这有效，输出是：2010 年 10 月 28 日晚上 8:40:23
When I try to use the filter on $scope.MyDate as follows:
当我尝试在 $scope.MyDate 上使用过滤器时，如下所示：
{{MyDate | date:'medium'}}
the date is not formatted but looks like this: Wed Sep 24 2014 07:40:02 GMT-0700 (Pacific Daylight Time)
日期未格式化，但看起来像这样：2014 年 9 月 24 日星期三 07:40:02 GMT-0700（太平洋夏令时）
Ultimately I would like to bind an input text box to this value and filter it like this:
最终我想将输入文本框绑定到这个值并像这样过滤它：
<input type="text" class="form-control" ng-model="MyDatee | date:'medium'"/>
I am hoping once i get the simple version working I can get my actual problem solved with the text input.
我希望一旦我得到简单版本的工作，我就可以通过文本输入解决我的实际问题。
Here is a plunker with the above code
回答by Tom
For the first part, use new Date()instead:
对于第一部分，请new Date()改用：
$scope.MyDate = new Date("2014-09-23T15:26:49.1513672Z");
Second, you can create a directive to format the model in the input(modified from here)
其次，您可以创建一个指令来格式化模型中的input（从这里修改）
The markup is like:
标记是这样的：
<input type="text" class="form-control" ng-model="MyDate" formatted-date format="medium" />
And the directive is like:
指令是这样的：
angular.module('myApp').directive('formattedDate', function(dateFilter) {
return {
require: 'ngModel',
scope: {
format: "="
},
link: function(scope, element, attrs, ngModelController) {
ngModelController.$parsers.push(function(data) {
//convert data from view format to model format
return dateFilter(data, scope.format); //converted
});
ngModelController.$formatters.push(function(data) {
//convert data from model format to view format
return dateFilter(data, scope.format); //converted
});
}
}
});
See updated plunkr
查看更新的plunkr
回答by kdlcruz
in your $scope.MyDate please replace it with
在您的 $scope.MyDate 中，请将其替换为
$scope.MyDate = new Date("2014-09-23T15:26:49.1513672Z");
回答by sylwester
http://plnkr.co/edit/6Se6Cv6ozF0B7F0X6gjl?p=preview
http://plnkr.co/edit/6Se6Cv6ozF0B7F0X6gjl?p=preview
but you can't use filter inside input to formate date inside input please see here
但是您不能在输入中使用过滤器来格式化输入中的日期，请参见此处
Using angularjs filter in input element
$scope.MyDate = new Date("2014-09-23T15:26:49.1513672Z");
回答by sankajai
You can change the date format like this
您可以像这样更改日期格式
<input type="text" class="form-control" value="{{MyDatee | date:'medium'}}"/>
<input type="text" class="form-control" value="{{MyDatee | date:'medium'}}"/>
