Ng-zorro-antd: Datepickers do not allow to type dates when nzFormat is different than default

[valerio-lucantonio]

Reproduction link

https://stackblitz.com/edit/angular-dnrngb

Steps to reproduce

1) set a custom nzFormat (like dd.MM.yyyy)
2) try to type a date manually

What is expected?

to be able to write dates according to the nzFormat

What is actually happening?

nothing happens. The date are not modified

| Environment | Info |
|---|---|
| ng-zorro-antd | 9.3.0 |
| Browser | chrome |

---

would be cool on tab out to close the flyout as well

[wenqi73]

You should import date-fns. https://ng.ant.design/docs/i18n/en#how-to-format-a-date-using-date-fns.

[wenqi73]

We should add this in document. 🤔

[valerio-lucantonio]

It works indeed, thank you very much!

[MoritzNeugebauer]

It works indeed, thank you very much!

@valerio-lucantonio what exactly did you do to make it work?

In app.module.ts I import

import de from '@angular/common/locales/de';
import { registerLocaleData } from '@angular/common';
import { NZ_I18N, de_DE, NzModalModule, NzNotificationModule, NZ_DATE_LOCALE } from 'ng-zorro-antd';
registerLocaleData(de);

and set providers like this:
{ provide: NZ_I18N, useValue: de_DE },
{ provide: NZ_DATE_LOCALE, useValue: de_DE },

In my component I use dateRangePicker:
[ngModel]="selectedKatalogwert.datumVonRange"
(ngModelChange)="updateFilterModel($event,ka)"
nzFormat="yyyyMMdd"
[ngModelOptions]="{ updateOn: 'blur' }"
(keydown.enter)="$event.target.blur()">

When clicking on the RangePicker to select a Date it throws an error:
core.js:6241 ERROR RangeError: locale must contain localize property
at format (index.js:361)
at DateHelperByDateFns.format (ng-zorro-antd-i18n.js:1069)
at DateTableComponent.makeHeadRow (ng-zorro-antd-date-picker.js:4796)
at DateTableComponent.render (ng-zorro-antd-date-picker.js:4587)
at DateTableComponent.ngOnInit (ng-zorro-antd-date-picker.js:4612)
at callHook (core.js:4726)
at callHooks (core.js:4690)
at executeInitAndCheckHooks (core.js:4630)
at refreshView (core.js:12026)
at refreshEmbeddedViews (core.js:13404)

[wenqi73]

The value of NZ_DATE_LOCALE is from 'date-fns', not ng-zorro.

[MoritzNeugebauer]

I overlooked the comment
// Set the value of NZ_DATE_LOCALE in the application root module to activate date-fns mode

So I manually set the value NZ_DATE_LOCALE in my app.module.ts like this
import { de as german } from 'date-fns/locale';
const NZ_DATE_LOCALE = german;

so that I can use it as a provider:
{ provide: NZ_DATE_LOCALE, useValue: de_DE },

Is this the way I should do it? It removed the error, but still DateRangePicker doesn't allow to type dates when I set nzFormat="yyyyMMdd"

[MoritzNeugebauer]

Sorry, this is odd. Now I got it working:

import { NZ_I18N, NzModalModule, NzNotificationModule, NZ_DATE_LOCALE } from 'ng-zorro-antd';
import deDateLocale from 'date-fns/locale/de';

{ provide: NZ_DATE_LOCALE, useValue: deDateLocale },

Thank you very much for your support, @wenqi73

[asamirel]

when i try to import deDateLocale from 'date-fns/locale/de', it gives me error :
Module '"date-fns/locale/de"' has no default export
does anyone knows how to pass this error ?