Ionic 4 | Add Date & Time Picker in Ionic 4 Application without Native Plugin

Ionic 4 supports a new Date and Time picker UI component which can be added in the application without any Native or third party module. Implementation of Ionic’s date and time picker is very easy and very flexible in terms of formatting date time formats of adding any min or max validation.

In this post, we will discuss How to Implement Date & Time picker in Ionic 4 application with formatting and validation.

Here we will start with a new Ionic 4 application created an updated version on Ionic CLI (current is v4.12.0). Make sure you have the latest version of CLI installed by running following CLI command.

Add DateTime Template in Component

DateTime picker is shown on screen as overlay sliding from bottom of the screen to enable selection of Month, Date, Year, Hours and Minutes in default or specified formats

We add <ion-datetime></ion-datetime> directive to show Month, Date and Year selection by default with CANCEL and DONE buttons.

Format Date & Time Selection

Picker date & time format which is shown after selection can be changed by providing display-format property.

If we want to show different formats on Picker and after selection, then we can use picker-format property

 

Min and Max Properties

We only need to add min & max properties on the ion-datepicker directive to set an upper or lower limit for selection

Check more details on available properties on docs here

Leave a Reply

avatar
  Subscribe  
Notify of