8

Using DatePipe in Angular 5.1, I need to format the period field type (AM/PM) in lowercase. According to the documentation,

Tuesday, December 19, 7:00 am

should be 

date:'EEEE, MMMM d, h:mm a'

However, the period field type always displays in uppercase, so I see this:

Tuesday, December 19, 7:00 AM

Am I doing something wrong or is this a known defect wtih Angular's date formatting?

4

4 回答 4

19

你可以把你的日期分成两部分：

{{ today | date : 'EEEE, MMMM d, h:mm' }} {{ today | date : 'a' | lowercase }}

…………………………………………………………………………

更新

这是实现它的另一种简单方法，使用内置date管道和aaaaa匹配器（返回小写a或p）：

<div>{{ today | date : 'EEEE, MMMM d, h:mm aaaaa\'m\'' }}</div>

更新了 Stackblitz：https ://stackblitz.com/edit/angular-dcpgzb?file=app%2Fapp.component.html

…………………………………………………………………………

Angular JS 解决方案

app.controller('MainCtrl', function($scope, $locale) {
  $locale.DATETIME_FORMATS.AMPMS = ['am', 'pm'];
  $scope.today = new Date();
});

https://plnkr.co/edit/a49kjvOdifXPAvBlmXEi?p=preview

于 2017-12-19T07:02:14.527 回答
2

真可惜。Angular 5 仍然是这种情况。

我创建了一个自定义管道，它将小写转换应用于与提供的正则表达式匹配的文本。

小写匹配管道

小写匹配.pipe.ts

import { Pipe, PipeTransform  } from '@angular/core';

@Pipe({
  name: 'lowercaseMatch'
})
export class LowerCaseMatchPipe implements PipeTransform {

  transform (input: any, pattern: any): any {

    if (!this.isString(input)) {
      return input;
    }

    const regexp = pattern instanceof RegExp ? pattern : new RegExp(pattern, 'gi');

    return input.toLowerCase()
    if (input.match(regexp)) {
      return input.toLowerCase()
    }

    return input
  }

  isString(value: any): boolean {
    return typeof value === 'string';
  }
}

用法

导入到模块

import { LowerCaseMatchPipe } from './lowercase-match.pipe';

@NgModule({
  declarations: [
    ...
    LowerCaseMatchPipe
  ],
  ...
})
export class AppModule { }

用小写的 am/pm 显示日期

{{ today | date : 'EEEE, MMMM d, h:mm a' | lowercaseMatch : 'am|pm' }}

在 Angular 的 GitHub 问题https://github.com/angular/angular.js/issues/8763上有一些关于此套管概念的讨论

于 2017-12-19T08:45:42.350 回答
1

最好呈现的形式是：

{{ 今天 | 日期：'MMM d, y, h:mm' | 标题大写}}

于 2021-03-10T00:12:59.700 回答
0

我想添加到 Andriy 的响应中并将其组合成一个插值

{{ (today | date: 'MMM d, y, h:mm') + (today | date: 'a' | lowercase) }}

我遇到了一个问题，即在 Andriy 提案的两个插值之间添加了一个空格。如果这是你想要的，那可以工作，但我需要没有空格的小写：ex。2020 年 10 月 21 日下午 1:16

于 2020-10-22T23:29:27.310 回答