Question

如何在Angular Java脚本中格式化日期？

代码

<p id="summaryHeader">Calendar of {{dt}}</p>

我得到的值是 2014-06-05T12:38:42.744Z

我试过这个

<p id="summaryHeader">Calendar of {{dt|date:'MMMM dd'}}</p>

给了我

Calendar of June 05

我需要Calendar of June 05th或7月2日等等......后方rd,th,st就是我要找的。

Anuglar Docs很好但不指定此格式。

Answer 1

我想这就是你要找的东西 - http://www.michaelbromley.co.uk/blog/13/an-ordinal-date-filter-for-angularjs 使用逻辑

的自定义过滤器

app.filter('dateSuffix', function($filter) {
  var suffixes = ["th", "st", "nd", "rd"];
  return function(input) {
    var dtfilter = $filter('date')(input, 'MMMM dd');
    var day = parseInt(dtfilter.slice(-2));
    var relevantDigits = (day < 30) ? day % 20 : day % 30;
    var suffix = (relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0];
    return dtfilter+suffix;
  };
});

演示：http://plnkr.co/edit/HiyQ9uvxQL3FRoj7hKB8?p=preview

Answer 2

你是正确的，日期过滤器不提供这种格式...我建议您编写自己的过滤器，或者只是这样做：

Calendar of {{dt|date:'MMMM dd'}}{{getOrdinal(dt)}}

如果你自己编写，我会从角度作为基线开始。

编辑在大师提供的答案中编写自己的想法是我会采取的方法。

为了扩展他创建的示例，我会调整它以便您可以使用以下语法：

Calendar of {{dt|date2:'MMMM ddoo'}}

其中oo是序数后缀

我更新了此代表plnkr，以便为您提供最大的灵活性。

Answer 3

对于遇到此问题的任何人，都有项目https://github.com/chrisiconolly/angular-all-ordinal-filters（完全免责声明：我自己的项目），它将为您提供角度的序数过滤器。

用它如下：

{{number | ordinal}} // 1 -> 1st
{{number | ordinalOnly}} // 1 -> st

经过全面测试并通过travis运行，因此它将保持稳定。

Answer 4

我希望将序数指标作为上标，因此使用以下内容：

<div>{{amount}}<sup ng-bind="amount | ordinal"></sup></div>

使用过滤器：

app.filter('ordinal', function() {
return function(number){
    if (isNaN(number) || number < 1){
        return '';
    } else if (number % 100 == 11 || number % 100 == 12) {
        return 'th';
    } else {
        var lastDigit = number % 10;
        if (lastDigit === 1) {
            return 'st';
        } else if (lastDigit === 2) {
            return 'nd';
        } else if (lastDigit === 3) {
            return 'rd';
        } else if (lastDigit > 3) {
            return 'th';
        }
    }
}
});

请注意，这会正确呈现11 th ，12 ，111 th ，1012 th ，而不是11的 ST

Answer 5

您可以将日期包装在momentjs对象中，例如

$scope.dt = moment($scope.dt);

然后做

<p id="summaryHeader">Calendar of {{dt.format("ddd Do")}}</p>

除非您已在其他地方使用momentjs，否则其他选项可能会更好。

Answer 6

虽然不是我最好的工作，但你可以从这开始作为基线

http://plnkr.co/edit/v2RuF72A9OPpFj5fvN8A?p=preview

AngularJS：获取后缀为rd，th和st的日期

6 个答案: