Ionic 4 Native | Date & Time Picker using Native DatePicker plugin Tutorial by Example

To give a more native look to the Ionic application we can replace HTML based Datepicker with Android’s Native Date and Time picker in Ionic hybrid applications. Ionic’s Native Datetime Picker plugin allows adding Android Date and Time picker with many custom options and themes.

In this tutorial, we will learn how to install and use Ionic’s Native Date Picker plugin in latest Ionic 4 applications.

Let’s get started!

We are going to create a new ionic 4 application using latest Ionic CLI tool with version 5.2.4

Create a New Ionic 4 Application

Run the following command to create a new Ionic 4 application with a blank template.

Install Date Picker Cordova and Native plugin

Run following commands one by one to install Cordova plugin and its Native wrapper to enable us to access its native methods via javaScript.

Import Date Picker plugin in App’s Module

After successful installation of the Date picker plugin, we need to import its class in app’s main module so that its methods are available throughout the application.

Open the app.module.ts file to import DatePicker class then add in providers array:

 

Adding Date & Time Pickers

As we created the Ionic application using a blank template, so we already have a Home Component. In the Home template, we will add three buttons to get Date, Time and Both Date Time.

Replace below code in the home.page.html file to call methods to show date and time pickers:

Update Home Component Class

To show the Date and Time Picker we will import DatePicker class in our home component:

Then add in the constructor of the class:

Also, define three variables of type stringto keep the selected date and time values.

Show DateTime Picker

To show DateTime picker we call show() method of DatePicker class which returns a promise. It also takes optional configurations:

 

Now we will update the home.page.ts file with following complete code:

In the above method, we have added some important options:

mode: The mode of the date picker, can be “date | time | datetime”
date: Selected date

minDate: Minimum date

maxDate: Maximum date

titleText: Label for the dialog title

okText: Label of BUTTON_POSITIVE (done button)

cancelText: Label of BUTTON_NEGATIVE (cancel button)

todayText: Label of today button. If empty, doesn’t show the option to select current date

nowText: Label of now button. If empty, doesn’t show the option to select the current time

is24Hour: Shows time dialog in 24 hours format

androidTheme: Choose the Android theme for the picker. You can use the DatePicker.ANDROID_THEMES property

That’s now to check this Native date picker you need to run the app in a real device.

DatePicker Native plugin adds native look to Ionic application and with a lot of option, it becomes easy to configure according to needs of the application.

 

 

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of