question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:7
  • Comments:18 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
augustoicarocommented, Aug 31, 2020

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,
    ...
  ],
2reactions
cwmrowecommented, Dec 12, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Validation fails when using dd/MM/yyyy date format with ...
I think the problem is related to jquery.validate and its inability to parse date string with "dd/MM/yyyy" format. You may check out this...
Read more >
Nebular - Datepicker Angular UI Component - GitHub Pages
NbDatepickerDirective may be validated using min and max dates passed to the datepicker. ... <nb-datepicker #datepicker format="MM\dd\yyyy"></nb-datepicker> ...
Read more >
Kendo UI ASP.NET MVC format Date into 'dd.MM.yyyy' - Telerik
Hi, I use Kendo UI ASP.NET MVC with VB.NET and jquery for client validation. My question is: How I can format the date...
Read more >
Datepicker Validation in Admin Area - nopCommerce
DatePicker fields formated like dd.mm.yyyy always turn into red (client validation fails). If we enter a date in the format dd/mm/yyyy,
Read more >
Datepicker - Angular Material
MM /DD/YYYY. The second way to add date validation is using the matDatepickerFilter property of the datepicker input. This property accepts a function...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found