Angular 5 - 如何在DatePipe中使句点字段类型为小写

时间:2017-12-19 05:46:45

标签: angular angular5 angular-pipe angular-date-format

在Angular 5.1中使用DatePipe,我需要以小写形式格式化句点字段类型(AM / PM)。根据{{​​3}},

Tuesday, December 19, 7:00 am 

应该是

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

但是,句点字段类型始终以大写字母显示,所以我看到了:

Tuesday, December 19, 7:00 AM

我做错了什么,或者这是Angular日期格式化的已知缺陷?

5 个答案:

答案 0 :(得分:6)

您可以将日期分为两部分:

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

...............

<强>更新

这是另一种实现它的简单方法,使用内置的date管道和aaaaa matcher(返回小写ap):

<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

答案 1 :(得分:1)

您可以在日期之后使用 lowercase 过滤器将上午/下午转换为小写。

For example: 1343623006 | date:'EEEE, MMMM d, h:mm a' | lowercase

答案 2 :(得分:1)

无赖。 Angular 5仍然如此。

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

小写匹配管道

<强>小写-match.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 { }

以小写的上午/下午显示日期

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

在Angular的GitHub问题上讨论了这个套管概念 https://github.com/angular/angular.js/issues/8763

答案 3 :(得分:0)

我想添加到安德里(Andriy)的响应并将其组合为一个插值

np.insert

我遇到了一个问题,在安德里建议的两个插值之间添加了空格。如果那是您想要的,那可以工作,但是我需要没有空格的小写字母: 例如2020年10月21日,下午1:16

答案 4 :(得分:0)

最好呈现的形式是:

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