如何在angularjs中格式化日期

Posted 2023-02-25

【中文标题】如何在angularjs中格式化日期

【英文标题】：How to format date in angularjs

【发布时间】：2014-04-18 23:54:41

【问题描述】：

我想将日期格式化为mm/dd/yyyy。我尝试了以下方法，但都不适合我。 谁能帮我解决这个问题？

参考：ui-date

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> 

<input type="date" ng-model="valueofdate" />

【问题讨论】：

您是否尝试过完全删除ui-date-format="mm/dd/yyyy"？看起来没有这个选项的默认行为就是你想要的。

你试过moment.js吗？

不，我没有尝试过 moment.js。我的服务器返回给我 Json 字符串 20140313T00:00:00。我尝试了两种方式 html5 输入类型日期和 ui-date-format。删除 ui-date-format 说它是一个字符串，给它一个格式。

使用 $formatters 和 $parsers per this answer 解决了我的类似问题。

您可以在 html 和 javascript 中使用过滤器，请参考：***.com/a/27615392/1904479

【参考方案1】：

Angular.js 有一个内置的日期过滤器。

demo

// 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

您可以看到支持的日期格式in the source for the date filter。

编辑：

如果您尝试在 datepicker 中获取正确的格式（不清楚您是在使用 datepicker 还是只是尝试使用它的格式化程序），那些支持的格式字符串在这里：https://api.jqueryui.com/datepicker/

【讨论】：

服务器返回我 '20140313T00:00:00 我想在这样的输入中以 mm/dd/yyyy 格式显示 --

我不确定为什么我的回答被否决了。这个答案几乎一字不差地取自 Angular 的文档。提到jQueryUI datepicker 格式字符串是因为问题中使用的模块是ui-date，它依赖于jQuery 和jQueryUI。答案没有任何错误或误导性。

我不认为 jQuery UI 链接对于格式字符串是正确的。 docs.angularjs.org/api/ng/filter/date 似乎更准确。

@TrueWill OP 专门询问使用 jQuery datepicker 的 ui-date。我帖子中的第一个链接链接到具有 angular 支持的格式字符串的源代码。

@JimSchubert 这是我的日期字符串 '2013-11-11 00:00:00'，它不会转换 |日期：'longdate'，有什么建议吗？

【参考方案2】：

如果您没有输入字段，而只是想以正确的格式显示字符串日期，您可以简单地选择：

<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 格式显示日期。

输出： 2014 年 12 月 15 日

编辑 如果您使用格式为“2014-12-19 20:00:00”字符串格式的字符串日期（从 php 后端传递），则应将代码修改为：https://***.com/a/27616348/1904479

进一步补充 在 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

【参考方案3】：

我正在使用它，它工作正常。

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

【讨论】：

这对我不起作用，如果我传递一个 JS Date 对象。有什么建议吗？

它应该只适用于日期以毫秒为单位的日期格式，在您的情况下，日期是日期格式。关注：w3schools.com/js/js_date_formats.asp

【参考方案4】：

这并不是您真正想要的 - 但您可以尝试在 html 中创建一个日期输入字段，例如：

<input type="date" ng-model="myDate" />

然后将其打印在您将使用的页面上：

<span ng-bind="convertToDate(myDate) | date:'medium'"></span>

最后，在我的控制器中，我声明了一个从输入值创建日期的方法（在 chrome 中显然解析为休息 1 天）：

$scope.convertToDate = function (stringDate)
  var dateOut = new Date(stringDate);
  dateOut.setDate(dateOut.getDate() + 1);
  return dateOut;
;

所以你有它。要查看整个工作情况，请查看以下 plunker：http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview。祝你好运！

【参考方案5】：

这将起作用：

 oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" 

注意：一旦你替换了这些，那么剩余的日期/毫秒将被转换为给定的格式。

【讨论】：

由于某种原因我的字段是这种格式 /Date(99999)/ 到，你知道为什么吗？

【参考方案6】：

我使用过滤器

.filter('toDate', function() 
  return function(items) 
    return new Date(items);
  ;
);

然后

'2018-05-06 09:04:13' | toDate | date:'dd/MM/yyyy hh:mm'

【参考方案7】：

查看角度 date api : AngularJS API: date

---

Angular - date 过滤器：

用法：

 date_expression | date  [: 'format']  [: 'timezone' ] 

示例：

代码：

 <span> '1288323623006' | date:'MM/dd/yyyy' </span>

结果：

10/29/2010

【参考方案8】：

只需将 UTC 日期格式从您的服务器端代码传递到客户端

并使用以下语法 -

 dateUTCField  +'Z' | date : 'mm/dd/yyyy'

 e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018

【参考方案9】：

查看了上述所有解决方案后，以下是我最快的解决方案。如果您使用的是角度材料：

 <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 以输入日期（来自此答案Change format of md-datepicker in Angular Material）

$mdDateLocaleProvider.parseDate = function(dateString) 
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
;

【参考方案10】：

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 日 * 01-03-2013

【参考方案11】：

convertToDate  | date :  dateformat                                             
$rootScope.dateFormat = 'MM/dd/yyyy';

【讨论】：

为什么您发表评论的行与您的答案相同？而你的回答只是一些代码，根本没有解释。

【参考方案12】：

好的，问题似乎来自这一行：https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106。

其实这一行是和jQuery UI的绑定，应该是注入数据格式的地方。

正如您在 var opts 中看到的那样，没有属性 dateFormat 的值来自 ng-date-format。

无论如何，该指令都有一个名为uiDateConfig 的常量，用于向opts 添加属性。

灵活的解决方案（推荐）：

从here 你可以看到你可以插入一些选项，在指令中注入一个带有 jquery ui 选项的控制器变量。

<input ui-date="dateOptions" ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />

myAppModule.controller('MyController', function($scope) 
    $scope.dateOptions = 
        dateFormat: "dd-M-yy"
    ;
);

硬编码解决方案：

如果您不想一直重复此过程，请将 date.js 中 uiDateConfig 的值更改为：

.constant('uiDateConfig',  dateFormat: "dd-M-yy" )

【参考方案13】：

我遇到了同样的问题，和上面的 cmets 一样，我认为 JavaScript 中必须有一个本地方法。问题是 new Date(valueofdate) 返回一个 Date 对象。

但是，请检查http://www.w3schools.com/js/js_date_formats.asp，表示前导零的部分。来自字符串的日期，例如来自 PHP 的回显，必须类似于：

$valueofdate = date('Y-n-j',strtotime('theStringFromQuery'));

这将传递一个字符串，例如：'1999-3-3'，JavaScript 将解析为具有正确格式的对象

$scope.valueofdate = new Date(valueofdate);

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />

日期格式的 PHP 链接：http://www.w3schools.com/php/func_date_date_format.asp。

【参考方案14】：

ng-bind="reviewData.dateValue.replace('/Date(','').replace(')/','') | date:'MM/dd/yyyy'"

使用它应该可以很好地工作。 :) reviewData 和 dateValue 字段可以根据您的参数进行更改，其余部分可以保持不变

【参考方案15】：

// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>