Datepicker Error occurred while getting date: Class not found

Ionic Framework ionic-v3
1

Hello Folks,

I am using the DatePicker as per the Ionic Native documentation however I get that error, the only difference is I want the datepicker to be available when a user clicks on an icon

Below is my html

<ion-header>
  <ion-navbar>
    <ion-row align-items-center>
      <!-- <ion-col col2 align-items-center>
        <ion-icon name="person" item-left></ion-icon>
      </ion-col> -->
      <ion-col col-12 align-items-center>
        <h1>Personal Details</h1>
      </ion-col>
    </ion-row>
  </ion-navbar>
</ion-header>

<ion-content padding>  
    <ion-icon (click)="attachDatePicker()"  name="calendar"></ion-icon>
</ion-content>

.Ts file

import { Component } from '@angular/core';
import { NavController, NavParams ,Platform} from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';
import {FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms';
import { CustomValidtorsProvider } from '../../providers/custom-validators/custom-validators';
import { DatePicker } from '@ionic-native/date-picker';
@Component({
  selector: 'personal-details',
  templateUrl: 'personal-details.html',
})
export class PersonalDetailsPage {
  
  constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage : NativeStorage, private fb : FormBuilder,
  private datePicker : DatePicker , private platform : Platform ) {
    platform.ready().then(()=>{


    })
    
  }

  ionViewDidLoad() {
       
  }

  attachDatePicker()
  {
    this.datePicker.show({
      date: new Date(),
      mode: 'date',
      }).then(
      date => console.log('Got date: ', date),
      err => console.log('Error occurred while getting date: ', err)
    );
    }

}

I have also imported into module.ts and added datepicker into the providers: can you please point out what did I miss?