akveo / nebular

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/nebular
MIT License
8.06k stars 1.51k forks source link

Initial calendar view shows wrong month when using format dd/MM/yyyy #3260

Closed Shadowman82 closed 3 months ago

Shadowman82 commented 3 months ago

Issue type

**I'm submitting a

Issue description

Current behavior: I am using a NbDatePicker and @nebular/date-fns with format "dd/MM/yyyy" and I have already set the proper LOCALE_ID in the app.module.ts. When I select a date from the date picker the date is properly set according to the format in the input text box. But when I load the page providing a initial value in the format dd/MM/yyyy and then I click on the textbox to show the calendar, the calendar is taking the date with day and month inverted, so if the day is more than 12 I saw NaN in the month field, otherwise I saw the day and month inverted. So if I pass "04/07/2024" as initial text string to the input text the calendar view is set on 7th April 2024 instead of 4th July 2024.

Screenshot 2024-07-01 115723 Screenshot 2024-07-01 134329

In case of NaN (so day > 12) I saw this in the console:

core.mjs:9171 ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at NbCalendarMonthModelService.isShouldAddPrevBoundingMonth (nebular-theme.mjs:4957:25)
    at NbCalendarMonthModelService.withBoundingMonths (nebular-theme.mjs:4916:18)
    at NbCalendarMonthModelService.createDaysGrid (nebular-theme.mjs:4907:21)
    at NbCalendarDayPickerComponent.ngOnChanges (nebular-theme.mjs:5128:42)
    at NbCalendarDayPickerComponent.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:1526:14)
    at callHook (core.mjs:2508:18)
    at callHooks (core.mjs:2467:17)
    at executeCheckHooks (core.mjs:2399:5)
    at refreshView (core.mjs:12020:21)
    at refreshEmbeddedViews (core.mjs:13039:17)

Expected behavior: So if I pass "07/04/2024" as initial text string to the input text the calendar view should be set on 7th April 2024.

Steps to reproduce:

Related code:

This is the code in app.module.ts

  providers: [
    { provide: LOCALE_ID, useValue: 'it-IT' },

And I added the following imports in the @NgModule

NbDateFnsDateModule.forRoot({
      format: 'dd/MM/yyyy'
    }),
    NbDateFnsDateModule.forChild({
      format: 'dd/MM/yyyy'
    }),

This is the html piece for the calendar (ruleDateStart is the string of initial date in the format dd/MM/yyyy):

<input class="input-text" #dateStart nbInput fullWidth placeholder="dd/MM/yyyy" [nbDatepicker]="pickerDateStart" value="{{ruleDateStart}}"  maxlength="10" readonly>        
<nb-datepicker #pickerDateStart format="dd/MM/yyyy"></nb-datepicker>

Other information:

npm, node, OS, Browser

<!--
Node 14.20
OS: Windows 11
Browser: any
-->

Angular, Nebular

Angular: 14
Nebular: 10
Shadowman82 commented 3 months ago

Solved, by moving this in the app.module

NbDateFnsDateModule.forRoot({ format: 'dd/MM/yyyy' }),