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?
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();
});
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.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 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
I want to add onto Andriy's response and combine it into a single interpolation
{{ (today | date: 'MMM d, y, h:mm') + (today | date: 'a' | lowercase) }}
I was having an issue where a space was being added between the two interpolations of Andriy's proposal. That can work if that's what you want, but I needed lowercase with no space: ex. Oct 21, 2020, 1:16pm
The form that would best be presented would be:
{{ today | date: 'MMM d, y, h:mm' | titlecase }}
