Nebular: NbDatePicker: validation fails when using format="dd.MM.yyyy"

[mahnuh]

Issue type

• [x] bug report
• [ ] feature request

Issue description

Current behavior:
When using format="dd.MM.yyyy" on NbDatePicker only dates from the 1st till 12th of a month are valid in the formGroup. Using @nebuler/moment and @nebular/date-fns does not make any difference. The issue here seems to be that the form validation does not use the date format I provided. This is the validation error: nbDatepickerParse: {value: "19.12.2018"}
As days from 1 to 12 are valid my guess is that days are taken for months?

Expected behavior:
19.12.2018 is a valid date when using format="dd.MM.yyyy".

Steps to reproduce:
See above.

Other information:

npm, node, OS, Browser

<!--
Node, npm: 10.13.0, 6.4.1
OS: macOS
Browser: any
-->

Angular, Nebular

"@angular/core": "7.1.1",
"@nebular/date-fns": "3.0.0",
"@nebular/moment": "3.0.0",
"@nebular/theme": "3.0.0",

[tomadj]

Hi !

Same problem in 3.0.1

[Tibing]

Hi Guys! Thanks for reporting this issue. But, As I see it, the solution is quite straightforward. You are trying to set format as dd.MM.yyyy but if we refer to moment or date-fns docs we'll find out we have to use all uppercase letters in format, like that: DD.MM.YYYY.

I'm closing the issue. If your issue isn't resolved, feel free to reopen it.

[tomadj]

Hi @Tibing,

No uppercase letters don't work :

DD.MM.YYYY --> output DD.12.YYYY
MM.DD.YYYY--> output 12/DD/YYYY

dd/MM/yyyy --> output 20/12/2018 OK BUT the formcontrol is not valid as @mahnuh said.

As days from 1 to 12 are valid my guess is that days are taken for months

(With date-fns)

Thank's

[jromerob]

Same issue for me .

Shows wrongs

Shows right but validation fails

[jromerob]

Works right, validate the control, but isn't the correct format for spanish date

[mahnuh]

@Tibing as @jromerob and @tomadj pointed out, it is still an issue. Can you please reopen it?

[Maxxil]

Hello,

The same problem for me.

As days from 1 to 12 are valid my guess is that days are taken for months

In the ThemeModule I have:

  ...NbDateFnsDateModule.forRoot({
    format : 'DD.MM.YYYY',
    parseOptions: { awareOfUnicodeTokens: true },
    formatOptions: { awareOfUnicodeTokens: true }
  }).providers,
  NbDateFnsDateService,

In my component.ts I have :

constructor(private formBuilder: FormBuilder,
    private dateService: NbDateFnsDateService,
    private route: ActivatedRoute) {

  }

...

    this.plantationForm = this.formBuilder.group({
      exploitant: [null, Validators.required],
      parcelle: [null, Validators.required],
      surface: [null, Validators.required],
      denree: [null, Validators.required],
      densite: [1, Validators.required],
      dateDebut: [today, Validators.required],
      dateFin: [new Date().setMonth(new Date().getMonth() + 4)]
      // dateDebut: [today, Validators.required],
      // dateFin: [today, Validators.required]
    });

In my view I have :

and

In my FormGroup errors I have :
nbDatepickerParse:{value: "18.04.2019"}

It looks like the issue wasn't resolved...

[romainpurchla]

Hi,

The problem is here. Any ideas how to solve this ?

/**
* We haven't got capability to parse date using formatting without third party libraries.
* */
NbNativeDateService.prototype.parse = function (date, format) {
   return new Date(Date.parse(date));
};

[lukele1607]

I still get same error when upgrade all package to latest version today

[riquemoraes]

I solved the problem of the date invalid, in the format dd / MM / yyyy, as follows:

I installed via npm the package moment:
npm i moment @ types / moment --save

I edited the native-date.service.js file, which in my case is in components \ calendar-kit \ services:

added to line 34: import * as moment from 'moment';

changed the NbNativeDateService.prototype.parse function:

NbNativeDateService.prototype.parse = function (date, format) { var mydate = moment(date, 'DD/MM/YYYY'); console.log('moment', mydate); return new Date(moment(mydate).format("MM/DD/YYYY")); };

Solved for me.

[bboy437]

Is there a code sample to watch? I want nb datepicker date format dd/mm/yyyy

[luca-nardelli]

Hey everyone, I've just bumped into this issue while using the date-fns adapter and what solved it for me was to install date-fns v2 instead of v1. Note that v2 was in beta until a couple of days ago so it wasn't installed by default by npm.

I've noticed it due to the call signature of the parse function in @nebular/date-fns DateService

[cuciacik]

Still same problem v4.4.0. A lot of problems with nebular :|

[mayanksudden]

Hi Tibing and yggg,

Still facing same validation issue with nebular 4.5.0., it is latest version.
When we select 11th november, it's valid and for other dates, it's invalid. Screenshots attached.

Expected :- The dates which are selectable, should be valid.

I hope, please suggest, because latest nebular version released with this issue.
Also request you, whenever releasing version, issue should be fixed.

In html

Select Date is required

In Ts file

this.min = this.dateService.addDay(this.dateService.today(), -3);
this.max = this.dateService.addDay(this.dateService.today(), 1);

[cwmrowe]

I have been having issues with the datepicker too but I think I undertstand it now.

Any time you import NbDatepickerModule and you want to use the format function you must include your format module (e.g. NbMomentDateModule) AFTER NbDatepickerModule. I believe this is because NbDatepickerModule provides NbNativeDateService (NatveDate) for use as the NbDateService by default, and in this case we want to override that with NbMomentDateService from NbMomentDateModule.

I think it would be simpler if Nebular made you choose the default NbDateService, rather than making NbNativeDateService default and forcing you to override it every time you include NbDatepickerModule.

[augustoicaro]

I made it work! I installed @nebular/date-fns with the version of nebular that I'm using npm i --save @nebular/[email protected] (Change to the version that you use). At my app.module.ts I added after NbDatepickerModule.forRoot(), the following line NbDateFnsDateModule.forRoot({ format: 'dd/MM/yyyy' }), (Change to the format that you want). Also, you need to add NbDatepickerModule in the imports of the module that you want to use, in my case was pages module pages.module.ts:

@NgModule({
  imports: [
    ...
    NbDatepickerModule,
    ...
  ],