Ionic Angular Date & Time picker tutorial; Throughout this quick example, you will find out a simple and easy way to integrate time picker and date picker in the Ionic Angular app using ionic’s predefined ion-datetime directive.

Date and time picker is an essential GUI element that allows you to set the latest and earliest date from the calendar component. Date and time are important for setting an event, adding a timestamp; it is widely used in almost every application.

We will not use any external plugin and library to integrate the date time picker. The ionic platform provides an ion-datetime directive simple solution to manage date and time, and you can add min and max date time with multiple formats.

Ionic 6 Date Picker and Time Picker Example

• Step 1: Create Ionic App
• Step 2: Implement DateTime Picker
• Step 3: Modify Date Picker Format
• Step 4: Add Time Picker in Ionic
• Step 5: Combine Date and Time Picker
• Step 6: Add Min and Max Date Picker
• Step 7: Date Time Display Format
• Step 8: Run Ionic App

Create Ionic App

Let us begin with installing ionic CLI:

npm install -g ionic

Immediately after start installing Ionic angular app:

ionic start demo-app blank --type=angular

Get into the application directory:

cd demo-app

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Implement DateTime Picker

The ion-datetime directive invokes the DateTime picker in ionic; it slides up from the bottom with scrollable columns.

The DateTime element’s design is such that you can specifically choose years, month, days, hours and minutes altogether.

You need to add this code to the home page HTML page; however, you may add it to any page of your choice.

<ion-item>
    <ion-label>Show DateTime</ion-label>
    <ion-datetime placeholder="Choose Date"></ion-datetime>
</ion-item>

Modify Date Picker Format

You can easily modify the Date and time format with the help of the displayFormat property; the default format is MM-DD-YYYY;

Let us change it to YYYY-DD-MM by adding the recommended code into the home page file.

<ion-item>
    <ion-datetime placeholder="Choose Date" displayFormat="YYYY-DD-MM"></ion-datetime>
</ion-item>

Now, you can see the changed date format in our app.

Add Time Picker in Ionic

It is easy to integrate a time picker in ionic you need to add the displayFormat property and pass the hh-mm-A value within the ion-datetime tag.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Time Picker Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-item>
    <ion-datetime placeholder="Choose Time" displayFormat="hh-mm-A"></ion-datetime>
  </ion-item>

</ion-content>

Combine Date and Time Picker

It is easy to combine both date as well as time picker in ionic, just add the displayFormat property and include MMM-DD-YY HH:mm value.

<ion-item>
    <ion-datetime placeholder="Choose DateTime" displayFormat="MMM-DD-YY HH:mm"></ion-datetime>
</ion-item>

Add Min and Max Date Picker

Generically, you can set the min and maxium range of two particular dates, and you will only be able to select dates from the given range. Add min and max properties with displayFormat to set the min and max date range.

<ion-item>
    <ion-datetime 
        placeholder="Select Date"
        displayFormat="MMMM, YYYY" 
        min="1990-01-05" 
        max="2021-02-28">
    </ion-datetime>
</ion-item>

DateTime Display Format

Here are the various display formats that you can use with displayFormat property to show date in various formats in ionic app:

Display Format	Example
M-YYYY	6-2005
MM/YY	06/05
MMM YYYY	Jun 2005
YYYY, MMMM	2005, June
MMM DD, YYYY HH:mm	Jun 17, 2005 11:06

Ionic offers plenty of methods and properties to customize the DateTime component, you must visit ionic website to check datetime properties and methods.

Run Ionic App

For testing you have multiple options, you may run the app in virtual device, real device or even in the browser by using the ionic lab package.

npm i @ionic/lab --save-dev

Run command from the command prompt to run the application:

ionic serve -l

Conclusion

As you can see, the Datetime picker manifests from the bottom section of the application, which is user-friendly when it comes to picking dates and times.

The scrollable picker even makes the date selection smooth, and you can choose years, months, days, hours and minutes pretty comfortably.

We have created the Ionic Angular date picker and time picker component, and this tutorial is over; we hope you liked it.