Ionic DateTime

The datetime component is used to present a picker interface, which makes it easy for the user to select date and time. The picker interface displays the scrollable columns which can be used to select years, months, days, hours, minutes, and second values. The Ionic datetime is similar to native datetime element. However, the Ionic datetime component is very easy to display date and time in a preferred format and helps in managing the datetime values.

Example

Here, we are going to see an example of <ion-datetime> component without any value or properties.

Output:

When you execute the above code snippets, it will display the following output.

Next, when you tap in the plain section, you will get the following screen. This screen shows your current system date information. As soon as you tap on the Done button, it will be placed into the plain section as like below format.

The Ionic datetime uses the following terminologies.

Display and Picker Format

The datetime component displays the datetime values in two places. The first one is in the <ion-datetime> component, and the second is the picker interface, which is presented from the bottom of the page.

Display Format

This property specifies how a datetime's value should be printed to the user within the datetime component. The <ion-datetime> element always display values relative to the user's timezone.

Picker Format

This property specifies which column will be shown in the picker format, the order of the column, and which format should be used within each column. If you didn't provide the picker format, it would use the value of displayFormat.

Example

In this example, we have added the displayFormat and pickerFormat property inside the <ion-datetime> component. This property displays the datetime in the specific format.

Output:

When you execute the above code snippet, it will give the following output.

Now, taps the Specific Format section, you will get the following screen. Here, you can select your desired year. As soon as you click on the Done button, it will be placed into the Specific Format section.

Datetime data

The handling of datetime values within JavaScript and HTML has always been a challenge. But, handling datetime in Ionic allows the developers to format datetime values within the input easily. It gives the simple datetime picker format for great user experience.

Max and Min datetimes

The dates are infinite in either direction, by default, the maximum date is the end of the current year, and the minimum date is the beginning of the year that was 100 years ago. You can customize the maximum and minimum datetime values by using the max and min properties. For example, if we set the min properties to 2015 and max properties to 2020-12-31, then the datetime component will restrict the selection between the beginning of 2015 and 31st December 2020.

Example

This example explains the use of disabled, min, and max properties with the <ion-datetime> component.

Output:

CustomPickerOptions

The custom Picker Options property allows you to create some custom buttons. The following example explains how custom picker options work with <ion-datetime> component.

Home.page.html

Home.page.ts

In this page, we have created the custom buttons Save and Log by using custom picker options.

Output:

When you execute the above code snippets, it will give the following screen.

Next, click on the Custom Picker section, it will give the following screen. Here, when you click on the Save button, the data will be saved, and the screen looks like the above image. Whereas when you click on the Log button, the page does not dismiss, and you will get the message: Clicked Log. Do not dismiss.

Custom Locale

The custom Locale property species the custom short names for your month. You can see the following example to understand how custom locale works with <ion-datetime> component.

Home.page.html

Home.page.ts

Output:

Specific Days/Months/Year

The <ion-datetime> component also allows you to select the specific days, months, and years by setting the properties monthValues, dayValues, and yearValues. You can see the following example to understand how it can work with <ion-datetime> component.

Output:

In the below output, you can scroll the specific columns up and down to select the specific days, months, and years.