Ionic 5 Angular Date & Time picker Example

Ionic 5 Angular date and time picker tutorial; In this step by step tutorial, we will learn how to add datepicker and time picker in an Ionic 5 Angular app.

Ionic offers Date and Time picker UI component, which allows us to implement date and time without using a third-party module. Integrating date and time picker in Ionic/Angular is merely effortless. It supports various Display Formats, and you can even set min and max date-times in an Angular 9 Ionic app.

To know more about date and time formats, check out the official documentation here.

Table of Contents

1. Get Started
2. Adding Datepicker in Ionic
3. Setting Min and Max Validation on DatePicker
4. Adding Time-picker in Ionic
5. Conclusion

Get Started

Let’s generate a new Ionic Angular app to start implementing date and time picker in an Ionic app.

To update the Ionic CLI, run the following command.

npm install -g ionic

Bash

Run the following command to install Ionic app.

ionic start ionic-date-time blank --type=angular

Bash

Enter into the project.

cd ./ionic-date-time

Bash

Run the following command to install lab mode as a dev-dependency.

npm i @ionic/lab --save-dev

Bash

Run the Ionic app in the browser.

ionic serve -l

Bash

Adding Datepicker in Ionic 5 Template

We use the ion-datetime component to add datepicker in Ionic app. Ionic date picker comes on the screen from the bottom of a page. You can separately choose Month, Date, Year, Hours and Minutes directly from scrollable columns which makes it great from the UX perspective.

In the below example we are adding ion-datetime directives in the Ionic HTML template to show Month, Date and Year along with default CANCEL and DONE buttons.

<ion-item lines="full">
  <ion-label>Enter Date</ion-label>
  <ion-datetime></ion-datetime>
</ion-item>

Markup

We can use the different format for picker and for displaying on the input field.

<ion-item>
  <ion-label>Enter Date</ion-label>
  <ion-datetime displayFormat="YYYY-MMMM-D" pickerFormat="DD MM YYYY">
  </ion-datetime>
</ion-item>

Markup

Setting Min and Max Validation on DatePicker

With Ionic dateTime component setting up min and max properties validation on ion-datepicker directive is very easy.

<ion-item>
  <ion-label>Enter Date</ion-label>
  <ion-datetime displayFormat="MMMM, YYYY" min="1987-06-30" max="2020-06-30">
  </ion-datetime>
</ion-item>

Markup

Adding Time-picker in Ionic

It is also straightforward to display time picker in Ionic 5, Ionic’s Datetime module is developer-friendly. It makes it very easy to show and manage date and time data in a selected format.

The displayFormat="" directive shows the picker with the appropriate DateTime format on the screen.

<ion-item>
  <ion-label>Time</ion-label>
  <ion-datetime displayFormat="h:mm A"></ion-datetime>
</ion-item>

Markup

Here are the few Display Formats to show the DateTime format.

<table>
  <thead>
    <tr>
      <th>Display Format</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>M-YYYY</code></td>
      <td><code>5-2020</code></td>
    </tr>
    <tr>
      <td><code>MM/YY</code></td>
      <td><code>06/87</code></td>
    </tr>
    <tr>
      <td><code>MMM YYYY</code></td>
      <td><code>Jun 2020</code></td>
    </tr>
    <tr>
      <td><code>YYYY, MMMM</code></td>
      <td><code>2020, June</code></td>
    </tr>
    <tr>
      <td><code>MMM DD, YYYY HH:mm</code></td>
      <td><code>Jun 10, 2020 12:06</code></td>
    </tr>
  </tbody>
</table>

Markup

Conclusion

We have completed Ionic 5 Angular DateTime picker tutorial. I hope you will love this tutorial, please share it with others.