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)
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 myapp.module.ts
I added afterNbDatepickerModule.forRoot(),
the following lineNbDateFnsDateModule.forRoot({ format: 'dd/MM/yyyy' }),
(Change to the format that you want). Also, you need to addNbDatepickerModule
in the imports of the module that you want to use, in my case was pages modulepages.module.ts
: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
) AFTERNbDatepickerModule
. I believe this is becauseNbDatepickerModule
providesNbNativeDateService
(NatveDate) for use as theNbDateService
by default, and in this case we want to override that withNbMomentDateService
fromNbMomentDateModule
.I think it would be simpler if Nebular made you choose the default
NbDateService
, rather than makingNbNativeDateService
default and forcing you to override it every time you includeNbDatepickerModule
.@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
--> outputDD.12.YYYY
MM.DD.YYYY
–> output12/DD/YYYY
dd/MM/yyyy
--> output20/12/2018
OK BUT the formcontrol is not valid as @mahnuh said.(With date-fns)
Thank’s
Hi !
Same problem in 3.0.1