Loading...

Time Picker in Power Apps Canvas App and Daylight Saving

Time Picker in Power Apps Canvas App and Daylight Saving
Date/Time picker is one of the fundamental controls which is not available in Power Apps canvas app yet. The Power Apps idea of adding "Time" picker on the Date picker control has been under review since 2018 and the idea of Time Picker control has been planned since 2017. For those who are building canvas apps for Dynamics 365 / Common Data Service would get the requirement to display the value of Date and Time field on canvas app or accept the user input on canvas app to set the Date and Time field value in CDS. Since date time picker control is not available, people come up with different ways and one of the most common ways is accepting the time part with x2 Drop down controls (one for hour part and another one for minute part). Even Microsoft Community Support engineers recommended that approach in multiple forum threads

For me, I personally prefer to use the Slider control for using as input controls for the hour and minute because it is easier to slide it on the mobile/tablet comparing to scrolling through x60 options to select for the minute input. Slider control may not be suitable if there is not a lot of space for the time picker controls (e.g. date time picker in the gallery)

These are the forumlas to get the Time value from various custom time picker controls.

Time(sldHour1.Value, sldMinute1.Value, 0)
For Slider control, we just have to set the Min and Max of the controls to 0-23 for the hour slider, 0-59 for the minute slider. The values of the controls are integer so that there is no conversion required to use the Time function. The second part is hardcoded with 0 in this sample.

Time(Value(drpHour2.Selected.Value), Value(drpMinute2.Selected.Value), 0)
To use a pair of Drop down controls as time picker control, specify the array ["00","01","02",...,"22","23"] for the Items property of the hour Drop down control and ["00","01","02",...,"58","59"] for the minute control. Since the selected value of the Drop down control will be a string of text, Value function needs to be used to convert into a number value before using the Time function.

TimeValue(drpHour3.Selected.Value & ":" & drpMinute3.Selected.Value & " " & drpAMPM3.Selected.Value)
Another alternative is using x3 Drop down controls with an additional one for AM/PM. In this case, the array Items property of the hour Drop down control will be ["1","2","3",...,"12"]. TimeValue function can be used to get the time value from these controls.


In a normal scenario, we can get the Date/Time value by adding the selected date from the Date control and time value from custom time picker controls using Date and Time functions.
dpkDate1.SelectedDate + Time(sldHour1.Value, sldMinute1.Value, 0)
It works perfectly fine for the lucky users in the countries/states with grey colours in the following map which do not observe daylight saving time.


But for those users who are in the countries/states which observe DST, the formula above will not work for two days a year. (the days that daylight saving starts and ends). As you can see in the image below, the date/time value of the middle one is one hour late on the day that DST ends in New Zealand for the time values on or after 3 AM. It is also 1 hour earlier for the time values after 2 AM on the day that DST started (in the first image of this post).


To resolve that issue, DateTimeValue function can be used to combine the date value and time value.
DateTimeValue(
Text(
dpkDate3.SelectedDate,
DateTimeFormat.ShortDate,
"en-GB"
) & " " &
drpHour3.Selected.Value & ":" & drpMinute3.Selected.Value & " " & drpAMPM3.Selected.Value,
"en-GB"
)

The first part is converting the date value to the short date string in a particular language and concatenate with the string of time part. Then, DateTimeValue function is used to convert that string to date/time value by specifying the same language used for converting the short date string.
Text(dpkDate3.SelectedDate, DateTimeFormat.ShortDate, "en-GB")

🛈 Note

Using the DateTimeValue may have some issues as specified in this forum thread for different languages and different browsers. I have only tested this in the Chromium Edge browser and Power Apps mobile app for Android with English (New Zealand) language.

Published on:

Learn more
Linn's Power Platform Notebook
Linn's Power Platform Notebook

A blog about Dynamics 365 and Power Platform (canvas apps in Power Apps and flows in Power Automate).

Share post:

Related posts

Microsoft Viva: Power Apps card for Viva Connections

Microsoft Viva has released a new Power Apps card for Viva Connections, which allows users to easily access their Power Apps and Cards on the ...

7 hours ago

FormLoad to FormLoaded: Enhancing Form Functionality with formLoaded in Power Apps

As developers, we understand that effective form handling is important for delivering a good user experience. Traditionally, many of us depend...

2 days ago

Cards in Power Apps

Cards in Power Apps can get you to send Adaptive Cards in Teams chats or channels without having to leave Power Platform to make your card! Ye...

4 days ago

Integrate Your Custom Copilot into Your Canvas App in Power Apps

Microsoft Copilot Studio allows creators to build tailored Copilots powered by AI effortlessly. In a few simple steps, you can implement your ...

4 days ago

PCF Control – Develop a React Rating Control for your Power Apps

In this blog you will understand how to develop a React component to render a Rating control for your power apps. Follow these steps to learn:...

10 days ago

Multi-Color Modern Themes in Power Apps

YoYo! 🚀 Ready to create your very own multi-color theme in Power Apps? In this video, I’ll show you how to “Power Up” (see what.....

11 days ago
Stay up to date with latest Microsoft Dynamics 365 and Power Platform news!
* Yes, I agree to the privacy policy