我想将日期格式化为mm/dd/yyyy。我尝试了以下方法，但都没起作用。有人能帮我吗？
参考：ui-date
<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />
如何在AngularJS中格式化日期
162
- user16
5
15个回答
219
Angular.js内置了日期过滤器。
// in your controller:
$scope.date = '20140313T00:00:00';
// in your view, date property, filtered with date filter and format 'MM/dd/yyyy'
<p ng-bind="date | date:'MM/dd/yyyy'"></p>
// produces
03/13/2014
- Joseph Yaduvanshi
13
2服务器返回给我 '20140313T00:00:00'，我想以 mm/dd/yyyy 的格式在类似这样的输入框中显示 -- <input type=date" ng-model="mydate" >。 - user16
我不确定为什么我的答案被踩了。这个答案几乎是直接从Angular文档中复制的。提到jQueryUI日期选择器格式字符串是因为在问题中使用的模块是ui-date，它依赖于jQuery和jQueryUI。答案中没有任何错误或误导性的内容。 - Joseph Yaduvanshi
我认为jQuery UI链接对于格式化字符串来说不正确。https://docs.angularjs.org/api/ng/filter/date 似乎更准确。 - TrueWill
@TrueWill OP 特别询问的是 ui-date，它使用 jQuery datepicker。我帖子中的第一个链接指向源代码，其中包含 Angular 支持的格式字符串。 - Joseph Yaduvanshi
似乎，如果您有一个日期时间值（即“2017-05-12 18:48:13”），则过滤器不会应用，除非您在SQL Select中执行REPLACE（date，' '，'T'）（以获取“2017-05-12T18：48：13”）。 - Oliver N.
显示剩余8条评论
104
如果您不需要输入字段，只是想以适当的格式显示字符串日期，则可以简单地使用以下方法：
<label ng-bind="formatDate(date) | date:'MM/dd/yyyy'"></label>
并在js文件中使用：
// @Function
// Description : Triggered while displaying expiry date
$scope.formatDate = function(date){
var dateOut = new Date(date);
return dateOut;
};
这将把字符串日期转换为JavaScript中的新日期对象，并以MM/dd/yyyy格式显示日期。
输出: 12/15/2014
编辑
如果您正在使用格式为“2014-12-19 20:00:00”的字符串日期（从PHP后端传递），则应修改代码为以下内容：https://dev59.com/GGXWa4cB1Zd3GeqPN4lL#27616348
进一步补充
从JavaScript中，您可以将代码设置为：
$scope.eqpCustFields[i].Value = $filter('date')(new Date(dateValue),'yyyy-MM-dd');
假设你已经有一个日期，否则你可以使用以下代码获取当前系统日期：
$scope.eqpCustFields[i].Value = $filter('date')(new Date(),'yyyy-MM-dd');
有关日期格式的更多细节，请参考：https://docs.angularjs.org/api/ng/filter/date
- Kailas
30
我正在使用这个，它运行良好。
{{1288323623006 | date:'medium'}}: Oct 29, 2010 9:10:23 AM
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 2010-10-29 09:10:23 +0530
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 10/29/2010 @ 9:10AM
{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}: 10/29/2010 at 9:10AM
- Ravindra Kumar
2
这对我不起作用，如果我传递一个JS日期对象。有什么建议吗？ - Panshul
它只适用于日期格式，其中日期以毫秒为单位，并且在您的情况下，日期是以日期格式表示的。请参考：https://www.w3schools.com/js/js_date_formats.asp - Ravindra Kumar
19
这并不完全符合您的要求 - 但您可以尝试在HTML中创建一个日期输入字段，例如：
<input type="date" ng-model="myDate" />
然后，要将它打印到页面上，您可以使用：
<span ng-bind="convertToDate(myDate) | date:'medium'"></span>
最后，在我的控制器中，我声明了一个方法，从输入值创建一个日期（在 Chrome 中显然会解析为比实际日期晚一天）：
最后，在我的控制器中，我声明了一个方法，从输入值创建一个日期（在 Chrome 中似乎会解析为比实际日期晚一天）：
$scope.convertToDate = function (stringDate){
var dateOut = new Date(stringDate);
dateOut.setDate(dateOut.getDate() + 1);
return dateOut;
};
所以，你现在就有了。要看整个过程，请参见以下 plunker：http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview。祝你好运！
- drew_w
11
我使用过滤器
.filter('toDate', function() {
return function(items) {
return new Date(items);
};
});
那么
{{'2018-05-06 09:04:13' | toDate | date:'dd/MM/yyyy hh:mm'}}
- Hamza BENDALI BRAHAM
11
这将起作用：
{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}
注意：一旦替换这些内容，剩余的日期/毫秒将被转换为给定的格式。
- Nitish Kumar
1
由于某种原因，我的字段格式为/Date(99999)/，你知道为什么吗？ - Antonio Correia
10
查看 Angular date API：AngularJS API：date
Angular -
date 过滤器：使用方法：
{{ date_expression | date [: 'format'] [: 'timezone' ] }}
示例：
代码：
<span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>
结果：
10/29/2010
- Eddy
4
只需从您的服务器端代码传递UTC日期格式到客户端，并使用以下语法 -
{{dateUTCField +'Z' | date : 'mm/dd/yyyy'}}
e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018
- Shivprasad P
1
在查看了上述所有解决方案后，以下是我最快的解决方案。如果您正在使用angular-material：
<md-datepicker ng-model="member.reg_date" md-placeholder="Enter date"></md-datepicker>
设置格式：
app.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
// Requires Moment.js OR enter your own formatting code here....
return moment(date).format('DD-MM-YYYY');
};
});
编辑：您还需要设置parseDate以输入日期（来自此答案更改Angular Material中md-datepicker的格式）
$mdDateLocaleProvider.parseDate = function(dateString) {
var m = moment(dateString, 'DD/MM/YYYY', true);
return m.isValid() ? m.toDate() : new Date(NaN);
};
- johan
1
var app=angular.module('myApp',[]);
app.controller('myController',function($scope){
$scope.names = ['1288323623006','1388323623006'];
});
这里的控制器名称是“myController”，应用程序名称是“myApp”。
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="x in names">
{{x | date:'mm-dd-yyyy'}}
</li>
</ul>
</div>
结果将如下所示： * 2010年10月29日 * 2013年01月03日
- Gopakumar
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
ui-date-format="mm/dd/yyyy"吗？看起来，没有这个选项的默认行为正是你想要的。 - Lukas$formatters和$parsers，根据这个答案解决了我的类似问题。 - Ross Rogers