Ionic Native DateTimePicker Demo

[benyaminL]

Hello, I’m trying to understand the docs here, but still, I got no clue about it, how to show it on the controller, like using the HTML or the tag. Need help. I’ve import the DatePicker, but still no clue how to use it. Thanks

[mclemcrew]

First, make sure you’re installing both plugins into your app:

ionic cordova plugin add cordova-plugin-datepicker
npm install --save @ionic-native/date-picker

In terms of typescript you’ll have to import it like this:

import { DatePicker } from '@ionic-native/date-picker';

and then down in your NgModule

providers: [
    ...
    DatePicker
]

When using it in HTML it depends on how you define things in Typescript. Basically you can display the date, a calendar icon or something of that sort.
For example, to show the date in HTML, first define this in typescript

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

then in HTML do something like:

<ion-buttons text-center>
      {{date}}
      <button clear style="background-color:#f6f7f8" icon-left (click)="showDatePicker()">
        <ion-icon name="calendar">
        </ion-icon>
      </button>
</ion-buttons>

If you’re looking for more documentation, ionic does a great job laying everything out for you here.

[benyaminL]

Thanks dude! I realize it after see it as a function. That’s great! Thanks!

[Hetuka]

Thanks a lott, it’s work for me…

[ipsjolly]

For Ionic 4 DatePicker Native plugin complete tutorial with all options check this post