0

I'm making an internationalized Angular application, so I implemented the MatLuxonDateModule for my MatDatepickers and it works fine. But I also want to use a Luxon pipe whenever I format a date instead of the built-in date pipe so it works consistently in all browsers and cultures.

I made one that works fine:

import { Pipe, PipeTransform } from '@angular/core';
import { DateTime, DateTimeFormatOptions } from 'luxon';

@Pipe({
  name: 'dateFormat',
})
export class LuxonDatePipe implements PipeTransform {
  transform(value: DateTime | Date, format: DateTimeFormatOptions = DateTime.DATE_SHORT): any {
    let dateTimeToUse: DateTime;
    if (value instanceof Date) {
      dateTimeToUse = DateTime.fromJSDate(value);
    } else {
      dateTimeToUse = value;
    }

    return dateTimeToUse.toLocaleString(format);
  }
}

Now I want to use it in the HTML template, like this:

{{ testDate | dateFormat: DateTime.DATE_MED_WITH_WEEKDAY }}

...but it doesn't know what "DateTime" is. I can solve this by changing it to:

{{ testDate | dateFormat: formatToUse }}

...but then I have to declare a property like this in the .ts file every time I need to format a date:

  formatToUse: DateTimeFormatOptions = DateTime.DATE_MED_WITH_WEEKDAY;

This is really cumbersome. Is there a way to "import" Luxon in the template so I can reference DateTime on-the-fly?

Edit: I suppose I could change the param to a string and add a huge switch case to the pipe to map to the Luxon formats, but that seems less than ideal.

Roobot
  • 860
  • 1
  • 10
  • 20
  • 1
    i think `DateTime` is a enum so if you want to use it you have to set the hole enum to a object in your component like `public eDateTime = DateTime` and than you can use it like `{{ testDate | dateFormat: eDateTime.DATE_MED_WITH_WEEKDAY }}` – DerHerrGammler Aug 20 '21 at 16:49
  • @DerHerrGammler That is definitely better than what I have. I will do that if I can't figure out a way to do it without having to touch the .ts file at all. – Roobot Aug 20 '21 at 16:58

1 Answers1

2

Try this:

change your pipe:

export class LuxonDatePipe implements PipeTransform {
  transform(value: DateTime | Date, format: string = 'DATE_SHORT'): any {
    let dateTimeToUse: DateTime;
    if (value instanceof Date) {
      dateTimeToUse = DateTime.fromJSDate(value);
    } else {
      dateTimeToUse = value;
    }

    return dateTimeToUse.toLocaleString((<any>DateTime)[format]);
  }
}

and use your pipe like this:

{{ testDate | dateFormat: 'DATE_MED_WITH_WEEKDAY' }}
Roobot
  • 860
  • 1
  • 10
  • 20
Juan Vicente Berzosa Tejero
  • 2,786
  • 2
  • 5
  • 15