datepicker Undefined

[chris087]

Installed:

npm i ion-datepicker --save
npm WARN [email protected] requires a peer of @angular/common@~5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@~5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/forms@~5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/http@~5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/platform-browser@~5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/platform-browser-dynamic@~5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of connect@^3.6.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@~2.4.2 but none is installed. You must install peer dependencies yourself.

• [email protected]
  added 1 package in 12.707s

app.module.ts

import { DatePickerModule } from 'ion-datepicker';

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp, {
backButtonText: 'Terug',
pageTransition: 'md-transition',

}),
IonicStorageModule.forRoot(),
PipesModule,
ComponentsModule,
DatePickerModule

],

Page:

`
import { DatePickerDirective } from 'ion-datepicker';

@IonicPage()
@component({
selector: 'page-afspraak',
templateUrl: 'afspraak.html',
providers: [DatePickerDirective],
})
export class AfspraakPage {

formData: any = {};
praktijken: any = [];

booklyData: any;
booklyActiviteiten: any;
booklyMedewerkers: any = false;
booklyNrOfPersons: any = false;

showStepPart1 = false;
showStepPart2 = false;

@ViewChild(DatePickerDirective)
public datepicker: DatePickerDirective;
public localDate: Date = new Date();
public initDate: Date = new Date();
public initDate2: Date = new Date(2015, 1, 1);
public minDate: Date = new Date(2018, 2, 31);
public maxDate: Date = new Date(2018, 11, 10);
public disabledDates: Date[] = [new Date(2017, 7, 14)];
public localeString = {
monday: true,
weekdays: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'],
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
};
public min: Date = new Date();

constructor(public loader: LoaderProvider, public afspraakProvider: AfspraakProvider, public user: UserProvider, public praktijkProvider: PraktijkProvider, public navCtrl: NavController, public navParams: NavParams) {
`

`loadDatePicker()
{
console.log(this.datepicker); ->>> = UNDEFINED

//this.datepicker.open(); -> NOT WORKING
//this.datepicker.changed.subscribe(() => console.log('test'));

}`