Question

我需要获取以下日期格式。

30th July 2019

我尝试什么

<time-zone  time="{{ 2019-07-31 18:30:00 }}" format="DD MMM YYYY"></time-zone>

结果：2019年8月1日

Answer 1

您可以构建自定义日期过滤器以添加后缀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>

Answer 2

您可以创建自定义序数日期管道，例如

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

StackBlitz Example

Logic inspired by this SO

Answer 3

或者，如果您已经在项目中使用Moment.js库，则可以使用其库方法转换为序数：

https://momentjs.com/docs/#/i18n/locale-data/

moment.localeData().ordinal(5); // 5th

https://momentjs.com/docs/#/displaying/format/

moment().format('Do MMMM YYYY'); // 5th September 2020

Answer 4

使用日期-fns：

import { Pipe, PipeTransform } from '@angular/core'
import { format } from 'date-fns'

@Pipe({name: 'dateFnsFormat'})
export class DateFnsFormatPipe implements PipeTransform {
  transform(date: Date, formatStr: string, options: any = {}): string {
    return format(date, formatStr, options)
  }
}

用法：

<span>{{ selectedDate | dateFnsFormat: 'do MMMM, y' }}</span>

结果：

<块引用>

2021 年 4 月 4 日

date-fns 文档：

https://date-fns.org/v2.21.1/docs/format

Angular中的日期序数（st，nd，rd，th）？

4 个答案: