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.