Ionic 5 Angular Date & Time picker Example

Ionic 5 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.

Get Started

Let’s generate a new Ionic 5 Angular 9 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

Run the following command to install Ionic app.

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

Enter into the project.

cd ./ionic-date-time

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

npm i @ionic/lab --save-dev

Run the Ionic app in the browser.

ionic serve -l

Adding Datepicker in Ionic 4/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>

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>

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>

Adding Time-picker in Ionic

It is also straightforward to display time picker in Ionic 4/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>

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>

Conclusion

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