How to Add a Time Picker in the Power Apps Canvas App?

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.