Angular 9 and ngx-admin nb Date picker invalid despite good format

Question

I have an issue with https://akveo.github.io/nebular/docs/components/datepicker/overview#nbdatepickerdirective . I have reactive form :

Component
this.addForm = new FormGroup({
    'monthOfChangeStart': new FormControl(),
    'monthOfChangeEnd': new FormControl(),
  },
);

  HTML template 
  <div class="form-group">
    <label for="endDate">Month of Change End</label>
    <input
      nbInput
      [nbDatepicker]="formControl"
      aria-describedby=""
      class="form-control"
      [formControl]="addForm.get('monthOfChangeEnd')"
      id="endDate"
      type="text"
      name="endDate"
    >
    <nb-datepicker
      #formControl
      format="dd-MM-yyyy" [formControl]="addForm.get('monthOfChangeEnd')"></nb-datepicker>
  </div>

when I provide a date in format 01-01-2020, the form is valid, but when I provide 13-01-2020 then the form is invalid. I think angular is thinking that dd is MM and thus declaring it as invalid.

Anyone had this issue?

score 1 · Answer 1 · edited Apr 22 '21 at 19:34

According to Formatting Issue and Nebular section probably you forgot to import NbDateFnsDateModule or NbMomentDateModule. If you choose as akveo suggest

npm i @nebular/date-fns

you could get error like here -> https://github.com/akveo/nebular/issues/2316 so just install also https://date-fns.org/docs/Getting-Started#installation. Last tip - NbDateFnsDateModule or NbMomentDateModule should be imported after NbDatepickerModule.

Angular 9 and ngx-admin nb Date picker invalid despite good format

1 Answers1