Ngx-bootstrap: Can't use datepicker / timepicker

[rafaelss95]

I'm using some modules of ng2-bootstrap and some of them are working (Accordion and Modal) but Datepicker and Timepicker aren't.

Module:

import {
    AccordionModule,
    DatepickerModule,
    ModalModule,
    TimepickerModule
} from 'ng2-bootstrap/ng2-bootstrap';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        AccordionModule,
        DatepickerModule,
        ModalModule,
        TimepickerModule
    ],
    providers: [ ... ]
})

Template:

<datepicker [showWeeks]="true"></datepicker>

I always got the following error:

'datepicker' is not a known element:

By the way I'm using the latest version of ng2-bootstrap.

Thanks in advance.

[musienkoyuriy]

Hi! Your problem appears cause you don't bind your component with any model. Look at the datepicker-demo as an example of using it.

[batchu]

@rafaelss95 I'm facing the same problem.

@musienkoyuriy

Here's what I have

<form (ngSubmit)="onSubmit()" [formGroup]="form">
 <datepicker formControlName="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
</form>

The error I get:

'datepicker' is not a known element:
1. If 'datepicker' is an Angular component, then verify that it is part of this module.
2. If 'datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
            </div>
        </div>
        [ERROR ->]<datepicker formControlName="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
<div *ngIf="sh"): DynamicForm@8:8 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'minDate' since it isn't a known property of 'datepicker'. ("
            </div>
        </div>
        <datepicker formControlName="dt" [ERROR ->][minDate]="minDate" [showWeeks]="true"></datepicker>

[rafaelss95]

@batchu I discovered what causes this. It's because ngModel is mandatory. For now, some components in ng2-bootstrap doesn't work with reactive forms. Take a look at #893.

[2n2n]

I was able to make it work on my app by using selectionDone output of datepicker
mycomponent.html

<input formControlName="date_of_birth" />
<datepicker 
            [minDate]="minDate" 
            [showWeeks]="true" 
            [dateDisabled]="dateDisabled"
            (selectionDone)="updateDoB($event)"></datepicker>

mycomponent.component.ts

...
updateDoB(e) {
    (<FormControl>this.applicantForm.get('date_of_birth')).patchValue(e);
  }