Ng-zorro-antd: DatePicker doesn't recognize manual date input when using nzFormat

[AmeBitto]

Reproduction link

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

Steps to reproduce

Add DatePicker component and set nzFormat="dd.MM.yyyy".

<nz-date-picker [(ngModel)]="date" nzFormat="dd.MM.yyyy"></nz-date-picker>

Manual input works only if date and month are same. For example, if we type 04.04.1995 it works, but 04.05.1995 is not working.

What is expected?

After writing string date, DatePicker changes date in the model.

What is actually happening?

Nothing happens

| Environment | Info |
|---|---|
| ng-zorro-antd | 8.1.2 |
| Browser | Chrome 76 |

---

Default format working fine

[wenqi73]

Thanks for your report, we will support it until dateFns release 2.0.0. (#2492 also reported it)

[darshanrampatel]

@wenqi73 date-fns has now released 2.0.0 so can this be looked at again please?

[wenqi73]

@darshanrampatel Sure, we will work it out soon.

[soulasvalentin]

Hello! Are there any updates on this? Thanks!

[valerio-lucantonio]

Guys any update?

[binle]

I think problem is here:
components/date-picker/lib/calendar/calendar-input.component.ts

 onInputKeyup(event: KeyboardEvent, isEnter: boolean = false): void {
    const date = this.checkValidInputDate(event);

    if (!date || (this.disabledDate && this.disabledDate(date.nativeDate))) {
      return;
    }

    this.value = date;
    this.valueChange.emit({ date, isEnter });
  }

  private checkValidInputDate(event: Event): CandyDate | null {
    const input = (event.target as HTMLInputElement).value;
    const date = new CandyDate(input);

    this.invalidInputClass = '';
    if (!date.isValid() || input !== this.toReadableInput(date)) {
      // Should also match the input format exactly
      this.invalidInputClass = `${this.prefixCls}-input-invalid`;
      return null;
    }

    return date;
  }

Problem is const date = new CandyDate(input);. You should support new CandyDate with dev's format or convert to date with dev's format before new CandyDate.
input now is string, and in CadyDate(components/core/time/candy-date.ts) it will create nativeDate = new Date(date);
nativeDate will be invalid with dev's format(EX dd/MM/yyyy)
Please take a look, thanks!

[xdrago1]

it is still not working on 9.2.2
That is really sad. Is there no workaround?

[wenqi73]

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

[codersgyan]

I managed to solve this issue using date-fns Locale.
I was looking for the Russian date format (dd.mm.yyyy). By changing prop nzFormat="dd.mm.yyyy", it didn't work.
So what I did is, Inapp.module.ts.

import { ru as RU} from 'date-fns/locale';

providers: [
    { provide: NZ_DATE_LOCALE, useValue: RU },
  ],

By doing this, all my date pickers worked fine.