In this Power Apps Tutorial, we will discuss how to add a time picker control in the Power Apps canvas app.
One of our clients recently asked us to add a time picker control alongside the date picker control while working with the Power Apps canvas app. They want to combine the time picker and date picker controls to collect the date and time.
Here, we will see how to add a time picker control to the Power Apps canvas app.
Also, Read: How to Highlight the Selected Item within a Power Apps Gallery?
Add time picker control to the Power Apps canvas app
In Power Apps, we can find a most common inbuilt control named ‘Date picker‘. As per the recent requirement, we will see how to add a time picker to the Power Apps canvas app.
To achieve the requirement, the following steps are:
- On the Power Apps screen, we have prepared a certain form using the Power Apps controls such as text input and date picker control.
- But, as per the requirement, we need to add a time picker control with the above Date picker control.
- Let’s insert the below expression to create two collections on the Power Apps screen’s OnVisible property. One is for hours (ColHours) and the other is for minutes (ColMinutes).
OnVisible =
//Create collection for hours
ForAll(
Sequence(
25,
0,
1
),
Collect(
ColHours,
{
HourText: If(
ThisRecord.Value < 10,
"0" & ThisRecord.Value,
ThisRecord.Value
),
HourValue: ThisRecord.Value
}
)
);
//Create collection for minutes
ForAll(
Sequence(
61,
0,
1
),
Collect(
ColMinutes,
{
MinuteText: If(
ThisRecord.Value < 10,
"0" & ThisRecord.Value,
ThisRecord.Value
),
MinuteValue: ThisRecord.Value
}
)
)
- Next, add two Power Apps drop-down controls to the screen and place them near the date picker control as shown below.
- Set the collections on each dropdown control’s Items property respectively. (i.e., ColHours & ColMinutes)
- To collect the name, selected date, and times, add a button control to the form.
- Insert the below expression on the button’s OnSelect property.
OnSelect = Collect(
CollAppointment,
{
FullName: Name_txt.Text,
AppointmentTime: Concatenate(
DatePicker1.SelectedDate,
" ",
Hour_Dropdown.Selected.HourValue,
":",
Minute_Dropdown.Selected.MinuteValue
)
}
)
Where,
- CollAppointment is the name of the collection
- Name_txt is the name of the Power Apps text input control.
- Hour_Dropdown and Minute_Dropdown are the names of the Power Apps dropdown controls.
- To display the collected values, add a Power Apps data table control and connect that data table to the collection I.e., CollAppointment.
- That’s all! Let’s fill out the form (Power Apps controls) and hit the Save button. As shown below, the inserted data will be collected and displayed in the data table:
This is how to work with the Power Apps time picker control within the canvas app.
Furthermore, you may like some more Power Apps tutorials:
- How to get current date in Power Apps?
- How to get month name from date in Power Apps
- Power Apps Timer Control Examples
- Power Apps Filter With Date Picker
- How to Patch Dataverse Choice Column in Power Apps
- Power Apps Table vs Collection
Conclusion
From this Power Apps Tutorial, we have learned how to build and use the time picker control within the Power Apps canvas app.
After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (9 times). I have also worked in companies like HP, TCS, KPIT, etc.
I appreciate you sharing this blog post. Thanks Again. Cool.
You’re so awesome! I don’t believe I have read a single thing like that before. So great to find someone with some original thoughts on this topic. Really.. thank you for starting this up. This website is something that is needed on the internet, someone with a little originality!
Great information shared.. really enjoyed reading this post thank you author for sharing this post .. appreciated