Ionic 6 Angular Date & Time picker Example

Last updated on: by Digamber
Ionic 6 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 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.

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

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 6 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>

Adding Datepicker in Ionic  Template

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, 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>

Adding Time-picker in Ionic

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 6 Angular DateTime picker tutorial. I hope you will love this tutorial, please share it with others.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.