Date Ordinal (st，nd，rd，th)，单位为Angular？
Date Ordinal (st，nd，rd，th)，单位为Angular？
提问于 2019-08-05 11:25:14
我需要得到下面的日期格式。
30th July 2019我尝试的是，
<time-zone time="{{ 2019-07-31 18:30:00 }}" format="DD MMM YYYY"></time-zone>结果:2019年8月1日
回答 4
Stack Overflow用户
发布于 2019-08-05 12:56:55
您可以创建一个自定义的序号日期管道，如下所示
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'ordinalDate'
})
export class OrdinalDatePipe implements PipeTransform {
transform(value: Date): string {
if (!value) {
return '';
}
let months= ["January","February","March","April","May","June","July",
"August","September","October","November","December"]
return `${value.getDate()}${this.nth(value.getDate)} ${months[value.getMonth()]} ${value.getFullYear()}`;
}
nth(d) {
if (d > 3 && d < 21) return 'th';
switch (d % 10) {
case 1: return "st";
case 2: return "nd";
case 3: return "rd";
default: return "th";
}
}
}将管道添加到模块声明中，然后在日期上使用它，如下所示
{{dateToFormat | ordinalDate}}Stack Overflow用户
发布于 2020-09-02 16:59:05
或者，如果您已经在项目中使用了Moment.js库，则可以使用其库方法将其转换为序数：
https://momentjs.com/docs/#/i18n/locale-data/
moment.localeData().ordinal(5); // 5thhttps://momentjs.com/docs/#/displaying/format/
moment().format('Do MMMM YYYY'); // 5th September 2020Stack Overflow用户
发布于 2019-08-05 12:34:50
您可以构建自定义日期筛选器以添加后缀rd、th和st。
下面的代码片段中编写了自定义筛选器，以获取日期值"dd"，并根据日期计算后缀
var app = angular.module('plunker', []);
app.filter('dateSuffix', function ($filter) {
var suffixes = ["th", "st", "nd", "rd"];
return function (input) {
var dtfilter = $filter('date')(input, 'dd');
var day = parseInt(dtfilter, 10);
var relevantDigits = (day < 30) ? day % 20 : day % 30;
var suffix = (relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0];
return $filter('date')(input, 'dd') + '' + suffix + ' ' + $filter('date')(input, 'MMM yyyy');
};
});
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.theDate = new Date();
}]);<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<span>{{ theDate | dateSuffix }}</span>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57351852
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号