Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nb-datepicker issue with NbDateFnsDateModule #1360

Open
1 of 2 tasks
Luca1991 opened this issue Apr 8, 2019 · 4 comments
Open
1 of 2 tasks

nb-datepicker issue with NbDateFnsDateModule #1360

Luca1991 opened this issue Apr 8, 2019 · 4 comments

Comments

@Luca1991
Copy link

Luca1991 commented Apr 8, 2019

Issue type

I'm submitting a ... (check one with "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 Luca1991 changed the title nb-datepicker date nb-datepicker issue with NbDateFnsDateModule Apr 8, 2019
@Luca1991
Copy link
Author

Luca1991 commented Aug 8, 2019

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
Copy link

@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
Copy link

dabide commented Oct 2, 2019

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
Copy link

Foriss commented Nov 15, 2019

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' );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants