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: November 02, 2021

Learn more

Linn's Power Platform Notebook

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

Time Picker in Power Apps Canvas App and Daylight Saving

Related posts

Power Apps Canvas App Training - Overview

How to create a Confirm Box in Canvas App Power Apps

Confirm Box in Canvas App

Auto-claim policies for Power Apps licenses | Getting Started With Power Shorts

Power Apps Training Program - Starting from Monday

How to Design People Search & Filter in Power Apps | Tutorial

Power Apps Training Program for Beginners #powerapps #powerappslearning

How to access multi-level hierarchical parental table columns in canvas app gallery

Accessing Hierarchical Parental Column in Canvas App Gallery

Paging in Gallery in Canvas App Power Apps