Nebular: nb-datepicker issue with NbDateFnsDateModule

[Luca1991]

Issue type

I'm submitting a ... (check one with "x")

• [X] bug report
• [ ] feature request

Issue description

Current behavior:
After installing @nebular/date-fns and importing NbDateFnsDateModule from app.module.ts I still get this error printed in the console:

ERROR Error: Can't format native date. To use custom formatting you have to install @nebular/moment or @nebular/date-fns package and import NbMomentDateModule or NbDateFnsDateModule accordingly.More information at "Formatting issue" https://akveo.github.io/nebular/docs/components/datepicker/overview#nbdatepickercomponent

Expected behavior:
I don't know if the component is parsing correctly the date, but when I select a date I can see it displayed correctly in the format I've set.

Related code:
My nb-datepicker code:

<div class="form-group row">
                <label for="inputBirthday" class="col-sm-3 form-control-label">Birthday</label>
                <div class="col-sm-9">
                  <input nbInput placeholder="Birthday" name="birthday" id="inputBirthday" [nbDatepicker]="formpicker" [ngModel]="userDetails.birthday">
                  <nb-datepicker #formpicker format="yyyy-MM-dd"></nb-datepicker>
                </div>
              </div>

PLEASE NOTE: this might be related to #1088 (now closed) but it is still there.

EDIT: I've also noticed that the format is wrong: If I choose "April 8, 2019" (today) I get "2019-04-08" in the input field, but fetching from TS I get: ""2019-04-07T22:00:00.000Z" that is 1 day backward and contains "T22:00:00.000Z" that cause problem server-side.

[Luca1991]

UPDATE:
I'm back to this issue. I've updated both angular and nebular to the latest versions, and the error "Error: Can't format native date" is not there anymore.

However the nb-datepicker is still broken when using ngModel. You will get the selected date minus a day, plus "T22:00:00.000Z". For example, selecting "2019-08-08" you will get "2019-08-07T22:00:00.000Z" (NOTE THE 07 INSTEAD OF THE 08).

@nnixaa do you have any idea where the "T22:00:00.000Z" come from?? thank you.

[mariotaku]

@Luca1991 It seems that ngModel isn't a formatted date. 2019-08-07T22:00:00.000Z is ISO8601 date format, format seems to be ignored while update value to ngModel.
I think this issue still exists.

[dabide]

The error message is due to NbDatepickerModule being imported _after_ NbDateFnsDateModule, as the former binds NbDateService to NbNativeDateService. Reversing the import order fixes this.

[Foriss]

A have same issue as @Luca1991.
On reactive form when I save date like 03.11.2019 in form data i have 2019-11-02T23:00:00.000Z
1 hour is missing.

EDIT:
I reslove problem by parsing date before sending it to backend:

formValue.date = format( new Date(formValue.date), 'yyyy-MM-dd' );