Angular 5 - how to make the period field type lowercase in DatePipe

Question

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?

Answer 1

You can just split your date to 2 parts:

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

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

UPDATE

Here is another simple way to achieve it, using built in date pipe and aaaaa matcher (which returns lowercase a or p):

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

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

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

ANGULAR JS solution

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

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

Answer 2

Bummer. This is still the case with Angular 5.

I've created a custom pipe which applies a lowercase transform to the text matching a provided regex.

Lowercase Match Pipe

lowercase-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';
  }
}

Usage

Import to Module

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

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

Display date with lowercase am/pm

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

---

There is some discussion about this casing notion on an GitHub Issue for Angular https://github.com/angular/angular.js/issues/8763

Answer 3

The form that would best be presented would be:

{{ today | date: 'MMM d, y, h:mm' | titlecase }}