如何在angularjs中格式化日期


143

我想将日期格式化为mm/dd/yyyy。我尝试了以下方法,但对我都不起作用。谁能帮我这个?

参考:ui-date

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

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

1
您是否尝试过ui-date-format="mm/dd/yyyy"完全删除?看起来没有此选项的默认行为就是您想要的。
卢卡斯2014年

您是否尝试过moment.js?
塞蒂亚2014年

不,我没有尝试过moment.js。我的服务器向我返回了Json字符串20140313T00:00:00。我尝试了两种方式html5输入类型date和ui-date-format。删除ui-date-format表示它是一个字符串,请为其指定格式。
user16 2014年

使用$formatters$parsers根据此答案解决了我类似的问题。
罗斯·罗杰斯

您也可以在html和javascript中使用过滤器,请参考:stackoverflow.com/a/27615392/1904479
Kailas

Answers:


204

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

您可以在日期过滤器的源代码中看到受支持的日期格式。

编辑

如果您尝试在datepicker中获取正确的格式(不清楚您是在使用datepicker还是只是尝试使用它的格式化程序),则这些受支持的格式字符串在此处:https : //api.jqueryui.com/datepicker/


1
服务器返回我'20140313T00:00:00,我想以mm / dd / yyyy格式在这样的输入中显示-<input type = date“ ng-model =” mydate“>
user16 2014年

我不确定为什么我的答案被否决了。这个答案几乎完全来自Angular的文档。之所以提到jQueryUI datepicker格式字符串,是因为问题中使用的模块是ui-date,它依赖于jQuery和jQueryUI。答案没有任何错误或误导。
吉姆·舒伯特

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

@TrueWill OP专门询问有关ui-date的问题,它使用jQuery datepicker。我帖子中的第一个链接链接到源代码,该源代码具有由angular支持的格式字符串。
Jim Schubert 2015年

@JimSchubert,这是我的日期字符串'2013-11-11 00:00:00',它将不会转换| date:“ longdate”,有什么建议吗?
alphapilgrim

97

如果您没有输入字段,而只想显示具有正确格式的字符串日期,则可以简单地进行以下操作:

<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 : //stackoverflow.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


27

我正在使用它,并且工作正常。

{{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对象,这对我不起作用。有什么建议吗?
Panshul '17

它仅适用于日期格式(其中日期以毫秒为单位),并且在您的情况下,日期格式为日期格式。跟随: w3schools.com/js/js_date_formats.asp
Ravindra

18

这并不是您真正想要的-但是您可以尝试在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;
};

所以你有它。要查看整个工作正常,请参阅以下代码:http ://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview 。祝您好运!


11

这将起作用:

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

注意:一旦您替换了这些,剩余的日期/毫秒将被转换为给定的孔。


由于某些原因,我的字段采用/ Date(99999)/格式,您知道为什么吗?
安东尼奥·科雷亚

9

参见angular dateapi:AngularJS API:日期


角度- date过滤器:

用法:

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


实例:

码:

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

结果:

10/29/2010

7

我用过滤器

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

然后

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

3

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

并使用以下语法-

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

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

1

看完上述所有解决方案后,以下是对我最快的解决方案。如果您使用角度材料:

 <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);
};

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年1月3日


0

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

实际上,这行是与jQuery UI的绑定,应该是注入数据格式的地方。

如您所见,您可能会想到,var opts没有属性dateFormat具有ng-date-format的值。

无论如何,该指令都有一个常数,uiDateConfig用于向中添加属性opts

灵活的解决方案(推荐):

这里您可以看到可以插入一些选项,并将带有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"
    };
});

硬编码的解决方案:

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

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

0

我遇到了与上述评论相同的问题,并认为JavaScript中必须存在本机方法。事情是new Date(valueofdate)返回一个Date对象。

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

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

例如,这将传递一个String:'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


0

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

使用它应该很好。:) reviewData和dateValue字段可以更改,因为您的参数其余部分可以保持不变


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

1
为什么要发表与答案相同的评论?您的答案只是一些代码,根本没有解释。
Pochmurnik,

-1
// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.