Change translocoDate styles

[MickL]

Is your feature request related to a problem? Please describe.
Is it possible to change the format of translocoDate styles? E.g. timeStyle: 'short' (and all others) for german is not correct. It displays 12:58 but no one would write a time like this. Instead it should be 12:58 Uhr.

Can i customize the styles per language? If yes it may be added to the docs. If no please consider this as a feature request :)

[MickL]

@shaharkazaz You moved this to a discussion. Does it mean this is already possible and not a feature request?

[shaharkazaz]

@MickL Transloco uses the built-in Intl object to do the formatting, you need to read the docs to find the combination that suits your needs.
From a short search online I see that the following:

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));
new Intl.DateTimeFormat('de', {hour: 'numeric'}).format(date);

Will produce 05 Uhr.

You'll need to investigate the docs and find the options that will produce the output you want.
Hope this gave you a direction.

Please LMK if I misunderstood the issue 🙂

[MickL]

Didnt Angular go away from intl for some reasons?
What if I would like to change the style totally? E.g. instead of "14.05.2021, 12:25" I would like to have "14.05.2021 / 12:25"? Wouldnt it make sense that the user can define custom translocoDate pipe styles?

[itayod]

@MickL, for customization you should take a look at transformers not sure if that's exactly what you are looking for but you can defiantly solve your problem using that.

[leptoquark1]

This can be a valid solution

export class AppLocaleDateTransformer implements TranslocoDateTransformer {
  transform(date: Date, locale: string, options: DateFormatOptions): string {
    // @see https://github.com/ngneat/transloco/blob/a363009e/libs/transloco-locale/src/lib/helpers.ts#L45-47
    if (date instanceof Date === false || isNaN(<any>date)) {
      return '';
    }

    // @see https://github.com/ngneat/transloco/blob/a363009e/libs/transloco-locale/src/lib/helpers.ts#L34-L43
    const defaultResult = new Intl.DateTimeFormat(locale, options as any).format(date);

    if (locale.startsWith('de-') === false || options.timeStyle === undefined || options.hour12 === true) {
      return defaultResult;
    }

    return defaultResult.concat(' Uhr');
  }
}
@NgModule({
  imports: [
    TranslocoLocaleModule.forRoot(),
  ],
  providers: [
    {
      provide: TRANSLOCO_DATE_TRANSFORMER,
      useClass: AppLocaleDateTransformer,
    },
  ],
})
export class AppModule {}

However, the fallback to the default result is not my prefered way. Better would be to call the DefaultNumberTransformer instance, but that class is not exported by the lib.

@shaharkazaz How is the chance to have this class exported by transloco-locale? I may create a pull request for that.

[shaharkazaz]

@leptoquark1 Sure, I don't see why not.