NbDateTimePicker usage

[voidbrain]

Issue type

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

• [X ] bug report
• feature request

Issue description

Current behavior:
Errors when using nb-date-timepicker component

Expected behavior:
I cannot insert a date-time picker in the page. Single component date picker works but I get errors when I want also time.

Steps to reproduce:
download last versione of nebular (6.2.1), open "datepicker.component.html" and add
<input nbInput placeholder="Pick Date" [nbDatepicker]="dateTimePicker"> <nb-date-timepicker withSeconds #dateTimePicker</nb-date-timepicker> as shown on the documentation

Related code:
https://stackblitz.com/edit/github-eqf4l6 (I am getting a different error here but I think this is useful for checking the evoirement)

Other information:

Node v12.16.0
npm: 6.14.8
macOS Catalina 10.15.7
Browser: Safari (irrelevant)
Angular, Nebular

{
"name": "ngx-admin",
"version": "6.0.0",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/akveo/ngx-admin.git"
},
"bugs": {
"url": "https://github.com/akveo/ngx-admin/issues"
},
"scripts": {
"ng": "ng",
"conventional-changelog": "conventional-changelog",
"start": "ng serve",
"build": "ng build",
"build:prod": "npm run build -- --prod --aot",
"test": "ng test",
"test:coverage": "rimraf coverage && npm run test -- --code-coverage",
"lint": "ng lint",
"lint:fix": "ng lint ngx-admin-demo --fix",
"lint:styles": "stylelint ./src/**/*.scss",
"lint:ci": "npm run lint && npm run lint:styles",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "ng e2e",
"docs": "compodoc -p src/tsconfig.app.json -d docs",
"docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
"prepush": "npm run lint:ci",
"release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig "./src/tsconfig.app.json""
},
"dependencies": {
"@akveo/ng2-completer": "^9.0.1",
"@angular/animations": "^10.2.1",
"@angular/cdk": "10.2.5",
"@angular/common": "^10.2.1",
"@angular/compiler": "^10.2.1",
"@angular/core": "^10.2.1",
"@angular/forms": "^10.2.1",
"@angular/material": "^10.2.6",
"@angular/platform-browser": "^10.2.1",
"@angular/platform-browser-dynamic": "^10.2.1",
"@angular/router": "^10.2.1",
"@asymmetrik/ngx-leaflet": "3.0.1",
"@fullcalendar/angular": "^5.3.1",
"@fullcalendar/daygrid": "^5.3.2",
"@fullcalendar/interaction": "^5.3.1",
"@microsoft/signalr": "^3.1.9",
"@nebular/auth": "^6.2.1",
"@nebular/eva-icons": "6.2.1",
"@nebular/security": "^6.2.1",
"@nebular/theme": "^6.2.1",
"@ngx-formly/bootstrap": "^5.10.5",
"@ngx-formly/core": "^5.10.5",
"@ngx-formly/schematics": "^5.10.5",
"@swimlane/ngx-charts": "^14.0.0",
"@types/chart.js": "^2.9.27",
"angular-datatables": "^9.0.2",
"angular2-chartjs": "0.4.1",
"bootstrap": "^4.5.3",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^0.7.0",
"ckeditor": "4.7.3",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"datatables.net": "^1.10.22",
"datatables.net-dt": "^1.10.22",
"echarts": "^4.9.0",
"eva-icons": "^1.1.3",
"intl": "1.2.5",
"ionicons": "2.0.1",
"jquery": "^3.5.1",
"leaflet": "1.2.0",
"nebular-icons": "1.1.0",
"ng2-ckeditor": "^1.2.9",
"ng2-smart-table": "^1.7.1",
"ngx-echarts": "^4.2.2",
"node-sass": "^4.14.1",
"normalize.css": "6.0.0",
"pace-js": "1.0.2",
"roboto-fontface": "0.8.0",
"rxjs": "6.6.3",
"rxjs-compat": "6.3.0",
"socicon": "3.0.5",
"style-loader": "^1.3.0",
"tinymce": "4.5.7",
"tslib": "^2.0.3",
"typeface-exo": "0.0.22",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1002.0",
"@angular/cli": "^10.2.0",
"@angular/compiler-cli": "^10.2.1",
"@angular/language-service": "10.1.6",
"@compodoc/compodoc": "^1.1.11",
"@fortawesome/fontawesome-free": "^5.15.1",
"@types/d3-color": "1.0.5",
"@types/datatables.net": "^1.10.19",
"@types/jasmine": "2.5.54",
"@types/jasminewd2": "2.0.3",
"@types/jquery": "^3.5.4",
"@types/leaflet": "1.2.3",
"@types/node": "^12.19.3",
"codelyzer": "^6.0.1",
"conventional-changelog-cli": "1.3.4",
"husky": "0.13.3",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"npm-run-all": "4.0.2",
"protractor": "~7.0.0",
"rimraf": "2.6.1",
"stylelint": "7.13.0",
"ts-node": "3.2.2",
"tslint": "~6.1.0",
"tslint-language-service": "^0.9.9",
"typescript": "3.9.7"
}
}

[voidbrain]

Now I'm getting NullInjectorError: No provider for InjectionToken NB_TIME_PICKER_CONFIG!.
What's the problem?

[voidbrain]

SOLVED
Needed to import NbDatepickerModule NbTimepickerModule in the module

[kingsimba]

I have the same problem. And I have both NbDatepickerModule and NbTimepickerModule injected.

ERROR NullInjectorError: R3InjectorError(PagesModule)[InjectionToken NB_TIME_PICKER_CONFIG -> InjectionToken NB_TIME_PICKER_CONFIG -> InjectionToken NB_TIME_PICKER_CONFIG -> InjectionToken NB_TIME_PICKER_CONFIG]: 
  NullInjectorError: No provider for InjectionToken NB_TIME_PICKER_CONFIG!

import { NgModule } from '@angular/core';
import { 
  NbCardModule, 
  NbIconModule, 
  NbButtonGroupModule, 
  NbButtonModule, 
  NbInputModule, 
  NbDatepickerModule, 
  NbTimepickerModule } from '@nebular/theme';

import { ThemeModule } from '../../@theme/theme.module';
import { DeviceComponent } from './device.component';
import { RouterModule } from '@angular/router';
import { TopicService } from './topic_service';


@NgModule({
  imports: [
    RouterModule,
    NbCardModule,
    NbIconModule,
    ThemeModule,
    NbButtonGroupModule,
    NbButtonModule,
    NbInputModule,
    NbDatepickerModule,
    NbTimepickerModule
  ],
  declarations: [
    DeviceComponent,
  ],
  providers: [
    TopicService,
  ],
})
export class DeviceModule {
}

[argupta23]

@kingsimba

If you are still having issues, within app.module.ts you need to add

".forRoot()"

to both NbDatePicker and NbTimePicker module imports.

[kingsimba]

@kingsimba

If you are still having issues, within app.module.ts you need to add

".forRoot()"

to both NbDatePicker and NbTimePicker module imports.

Thanks! This indeed solved the problem.
But can you teach me why some modules have forRoot() while others have not(for example NbButtonModule?)