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)
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.
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.
Absolute life-saver! Thank you!
ReplyDelete