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

Issue type

  • 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",

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 7
  • Comments: 20 (1 by maintainers)

Most upvoted comments

I made it work! I installed @nebular/date-fns with the version of nebular that I’m using npm i --save @nebular/date-fns@5.0.0 (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,
    ...
  ],

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 This worked for me as well. My problem was with the “dd MMM yyyy” format. The different thing for me was that only Firefox marked it invalid, but it worked ok on Chrome. After using your solution it works ok on both browsers now. Thank you.

@augustoicaro You’re a life saver, your solution worked for me, thanks!

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.

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

Hi !

Same problem in 3.0.1