Angular 6 using 'h' as time separator

Question

Is there any built-in easy way to use 'h' as hours/minutes separator? I am trying to do something like this "12h45" as per:

https://en.wikipedia.org/wiki/Date_and_time_notation_in_France

For other countries it is quite easy e.g.

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'dateFormat'
})
export class DateFormatPipe extends DatePipe implements PipeTransform {

  transform(value: any, args?: any): any {

    switch (args) {
      case 'en': {
        return super.transform(value, 'MM/dd/yyyy h:mm a');
      }

      case 'fr': {
        return super.transform(value, 'dd/MM/yyyy HH:mm'); // <--- find proper separator
      }

      case 'de': {
        return super.transform(value, 'dd.MM.yyyy HH:mm');
      }

      case 'es': {
        return super.transform(value, 'yyyy/MM/dd hh:MM');
      }
    }
  }
}

NOTE: selected date formats might not be true or in everyday use, this is just for demo purpose.

Christian Vincenzo Traina · Accepted Answer · 2022-05-12T07:24:35.560

2

No, there's no built-in solution to use 'h' as separator. Although, as you can see here, the transform() methods always return either string or null. You can leverage on this and use the .replace() method to substitute the semicolon with the h letter:

case 'fr': {
    const transformedDate = super.transform(value, 'dd/MM/yyyy HH:mm');
    return transformedDate?.replace(':', 'h');
}

edited May 12 '22 at 07:24

answered Aug 30 '18 at 22:58

Christian Vincenzo Traina

9,546
2
40
63

Thanks, this works for me: return transformedDate.replace(':', 'h'); – Nenad Bulatović Aug 30 '18 at 23:02
1

That was the answer before I edited it. Actually, using the OR operator is a safer solution. If DatePipe can't parse the date it will return null, and if you call `replace()` on something that's not a string, you'll receive the famous `Cannot read property 'replace' of null` – Christian Vincenzo Traina Aug 30 '18 at 23:06
Yes, but if I us it with OR then it doesn't replace, without it it works. – Nenad Bulatović Aug 30 '18 at 23:07
1

Ops, my mistake (I'm sleepy!). I meant AND – Christian Vincenzo Traina Aug 30 '18 at 23:10

Frank Fajardo · Answer 2 · 2018-08-31T01:38:27.367

2

You can also do either of these two:

super.transform(value, 'H\'h\'mm');
super.transform(value, "H\'h\'mm");

Anything in the format string that is enclosed in single quotes is shown as is. So if value has time as 1:15pm, this will return 13h15.

See it work on this fiddle: https://stackblitz.com/edit/angular-wvtdpw

edited Aug 31 '18 at 01:38

answered Aug 31 '18 at 01:31

Frank Fajardo

7,034
1
29
47

Angular 6 using 'h' as time separator

2 Answers2