Locale Date Angular 8 unable to convert

Question

In my app.module.ts I added this code:

import { NgModule, LOCALE_ID } from '@angular/core';

import it from '@angular/common/locales/it';
import { registerLocaleData } from '@angular/common';

registerLocaleData(it);
//inside here I got all the necessary imports that I will not write here to avoid confusion
@NgModule({
  declarations: [
  ],
  imports: [
  ],
  providers: [{ provide: LOCALE_ID, useValue: "it-IT" }],
  bootstrap: []
})

Inside my html I have

<dd *ngIf="rec.DATECREATE" class="col-sm-8">{{rec.DATECREATE | date:'dd/MM/yyyy hh:mm:ss'}}</dd>

I get this error

Error: InvalidPipeArgument: 'Unable to convert "giu 22, 2021 11:14:38 AM" into a date' for pipe 'DatePipe'

if I try to replace giu with jun at runtime I don't get any error so the problem should be that it tries to use English instead of Italian. I think it does not read what I defined in my app.module.ts, how to fix this?

If you look at the [source of the locale you import](https://github.com/angular/angular/blob/master/packages/common/locales/it.ts), it uses the id of 'it' and not 'it-IT'. Try changing that in your providers, I think it should fix the issue. — TotallyNewb, Jul 01 '21 at 08:28
@TotallyNewb No, it does not work even if I change it-IT to it. — LiefLayer, Jul 01 '21 at 08:35

score 2 · Accepted Answer · answered Jul 01 '21 at 08:37

2

Method toDate is used to convert a string into the Date under the hood of the date pipe. Looking into its source code I'm surprised to see the locale we provide in the module configuration is not took into account. It checks:

if a string is actually a number (not your case)
if a string using is in ISO format without time (not your case)
if a string using is in ISO format with time (not your case)
fallsback to a constructor

  const date = new Date(value as any);
  if (!isDate(date)) {
    throw new Error(`Unable to convert "${value}" into a date`);
  }
  return date;

So, it's up to us developers to convert the date from location-specific to ISO, number or a format that we are sure would be processed by the Date constructor.

answered Jul 01 '21 at 08:37

IAfanasov

4,775
3
27
42

So basically I need to replace the first 3 char of the date string from italian to english manually and pass that string to the pipe, it's this correct? – LiefLayer Jul 01 '21 at 08:54
IAfanasov Maybe a solution could be to convert the date in a different format like I tried to use numbers instead of letters for the month and the DatePipe works... But I receive the date from java call, how can I convert it to a different format? Is there any good solution that is not manual string conversion? – LiefLayer Jul 01 '21 at 09:18
for now I will accept your answer since I did not found anything better, I'm trying to see if return a string from Java will get me a better solution on angular – LiefLayer Jul 01 '21 at 14:54
I'm not sure about replacing the 3 char from Italian to English. If it works or not would depend on the browser's locale. I suppose the best way would be to convince BE to return ISO formatted string. If it is not possible and BE really wants to return a localized date string, I would consider sending a header with the locale identifier, so that BE would format date to a user's locale. If it's not an option, I would rather implement ad hoc date parser or use some library to convert localized date string to an object, eg https://github.com/iamkun/dayjs/issues/694#issuecomment-543209946 – IAfanasov Jul 02 '21 at 06:57

Locale Date Angular 8 unable to convert

1 Answers1