i need to get below date format.
30th July 2019
what i try,
<time-zone time="{{ 2019-07-31 18:30:00 }}" format="DD MMM YYYY"></time-zone>
Result : 01 Aug 2019
i need to get below date format.
30th July 2019
what i try,
<time-zone time="{{ 2019-07-31 18:30:00 }}" format="DD MMM YYYY"></time-zone>
Result : 01 Aug 2019
Share Improve this question edited Aug 5, 2019 at 5:56 jitender 10.4k1 gold badge21 silver badges45 bronze badges asked Aug 5, 2019 at 3:25 PrasangaPrasanga 1,0382 gold badges15 silver badges35 bronze badges 3 |5 Answers
Reset to default 12You can create a custom ordinal date pipe something like
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'ordinalDate'
})
export class OrdinalDatePipe implements PipeTransform {
transform(value: Date): string {
if (!value) {
return '';
}
let months= ["January","February","March","April","May","June","July",
"August","September","October","November","December"]
return `${value.getDate()}${this.nth(value.getDate())} ${months[value.getMonth()]} ${value.getFullYear()}`;
}
nth(d) {
if (d > 3 && d < 21) return 'th';
switch (d % 10) {
case 1: return "st";
case 2: return "nd";
case 3: return "rd";
default: return "th";
}
}
}
Add pipe to module declarations and then use it on your date like
{{dateToFormat | ordinalDate}}
StackBlitz Example
Logic inspired by this SO
Alternatively, if you already use the Moment.js library in your project, you can use its library method to convert to ordinal:
https://momentjs.com/docs/#/i18n/locale-data/
moment.localeData().ordinal(5); // 5th
https://momentjs.com/docs/#/displaying/format/
moment().format('Do MMMM YYYY'); // 5th September 2020
you can build the custom date filter to add the suffix rd, th and st.
The custom filter is written in below snippet to get the date value "dd" and based on date calculate the suffix
var app = angular.module('plunker', []);
app.filter('dateSuffix', function ($filter) {
var suffixes = ["th", "st", "nd", "rd"];
return function (input) {
var dtfilter = $filter('date')(input, 'dd');
var day = parseInt(dtfilter, 10);
var relevantDigits = (day < 30) ? day % 20 : day % 30;
var suffix = (relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0];
return $filter('date')(input, 'dd') + '' + suffix + ' ' + $filter('date')(input, 'MMM yyyy');
};
});
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.theDate = new Date();
}]);<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<span>{{ theDate | dateSuffix }}</span>
</body>
</html>Using date-fns:
import { Pipe, PipeTransform } from '@angular/core'
import { format } from 'date-fns'
@Pipe({name: 'dateFnsFormat'})
export class DateFnsFormatPipe implements PipeTransform {
transform(date: Date, formatStr: string, options: any = {}): string {
return format(date, formatStr, options)
}
}
Usage:
<span>{{ selectedDate | dateFnsFormat: 'do MMMM, y' }}</span>
Result:
4th April, 2021
date-fns docs:
https://date-fns.org/v2.21.1/docs/format
Save yourself the headache. I wrote a simple function to handle this.
getDay()
{
let dateNew = new Date(), day = dateNew.getDate(), ordinal = 'th';
if (day == 2 || day == 22) ordinal = 'nd';
if (day == 3 || day == 23) ordinal = 'rd';
if (day == 21 || day == 1 || day == 31) ordinal = 'st';
return day + '' + ordinal;
}
Usage
<p>{{ getDay() }}</p>
Output
12th
time-zonecomponent is but angular has an inbuilt date pipe – bryan60 Commented Aug 5, 2019 at 3:38