Angular 5 - how to make the period field type lowercase in DatePipe
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
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 Angularhttps://github.com/angular/angular.js/issues/8763
The form that would best be presented would be:
{{ today | date: 'MMM d, y, h:mm' | titlecase }}