nb-datepicker doesn't render when LOCALE_ID is specified

[jdmveira]

Issue type

Error with nb-datepicker render with locale other than English

I'm submitting a ... (check one with "x")

• [ x] bug report
• [ ] feature request
• [ ] question about the decisions made in the repository

Issue description

Using ngx-admin "as-is". If you add LOCALE_ID provider in app.module.ts other than "en" - i.e. "es" - nb-datepicker is not rendering as it should.

Current behavior:

If LOCALE_ID "es" is provided in app module, nb-datepicker stops rendering a calendar.

Expected behavior:

1. You should be able to include LOCALE_ID as provider in app module other than "en" without breaking any component.
2. nb-datepicker should render a calendar
3. Once a date is selected, it should display using LOCALE "es" format

Steps to reproduce:

1. Replace app.module.ts line with
2. providers: [{ provide: LOCALE_ID, useValue: "es" }],
3. Add needed imports
4. Browse to pages/forms/datepicker
5. Date picker renders as shown next

Related code:

insert short code snippets here

/*

• Copyright (c) Akveo 2019. All Rights Reserved.
• Licensed under the Single Application / Multi Application License.
• See LICENSE_SINGLE_APP / LICENSE_MULTI_APP in the 'docs' folder for license information on type of purchased license. */ import { BrowserModule } from "@angular/platform-browser"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { NgModule, LOCALE_ID } from "@angular/core"; import { HttpClientModule } from "@angular/common/http"; import { CoreModule } from "./@core/core.module";

import { AppComponent } from "./app.component"; import { AppRoutingModule } from "./app-routing.module"; import { ThemeModule } from "./@theme/theme.module"; import { AuthModule } from "./@auth/auth.module";

import { NbChatModule, NbDatepickerModule, NbDialogModule, NbMenuModule, NbSidebarModule, NbToastrModule, NbWindowModule, } from "@nebular/theme";

@NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, AppRoutingModule,

AuthModule.forRoot(),

NbSidebarModule.forRoot(),
NbMenuModule.forRoot(),
NbDatepickerModule.forRoot(),
NbDialogModule.forRoot(),
NbWindowModule.forRoot(),
NbToastrModule.forRoot(),
NbChatModule.forRoot({
  messageGoogleMapKey: "AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY",
}),
CoreModule.forRoot(),
ThemeModule.forRoot(),

], bootstrap: [AppComponent], providers: [{ provide: LOCALE_ID, useValue: "es" }], }) export class AppModule {}

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

node: v14.5.0 npm: v6.14.5 OS: Windows 10 Browser: Edge Chromium

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

Angular: v9.0.4 Nebular: v5.0.0

[Rickedb]

Try adding this to your app.module.ts:

import localeEs from '@angular/common/locales/es';
import {registerLocaleData} from '@angular/common';

registerLocaleData(localeEs, 'es');
...
providers: [{ provide: LOCALE_ID, useValue: "es" }], //also keep this that is already set on your module