9

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

jitender
  • 10,238
  • 1
  • 18
  • 44
Prasanga
  • 1,008
  • 2
  • 15
  • 34

5 Answers5

11

You 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

jitender
  • 10,238
  • 1
  • 18
  • 44
  • 1
    There is a typo in your code. this.nth(value.getDate) should be this.nth(value.getDate()) – Joseph Moore Jul 27 '22 at 11:05
  • It also doesn't work for months with 31 days. The if statement should read if ((d != 31) && (d >3 && d < 21)) return 'th' – NealM Jan 04 '23 at 14:24
5

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
Bart Verkoeijen
  • 16,545
  • 7
  • 52
  • 56
  • Really efficient to use if moment has been used in the project and you want ordinals without having to create a custom pipe or anything. – Atul Stha Feb 15 '21 at 12:32
1

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="angular.js@1.2.x" 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>
Rishab
  • 1,484
  • 2
  • 11
  • 22
1

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

danday74
  • 52,471
  • 49
  • 232
  • 283
0

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
Ifeanyi Amadi
  • 776
  • 5
  • 10