Ionic 6 Angular Date & Time picker Example
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
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>
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>
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.