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.
Power Apps time picker control
Power Apps time 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
        }
    )
)
Power Apps add time picker control
Power Apps add time picker control
  • 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)
Add time picker control to Power Apps canvas app
Add time picker control to Power Apps canvas app
  • 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.
Work with time picker in Power Apps canvas app
Work with time picker in Power Apps canvas app
  • To display the collected values, add a Power Apps data table control and connect that data table to the collection I.e., CollAppointment.
Power Apps add time picker
Power Apps add time picker
  • 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:
Time picker control in Power Apps canvas app
Time picker control in Power Apps canvas app

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:

Conclusion

From this Power Apps Tutorial, we have learned how to build and use the time picker control within the Power Apps canvas app.

  • 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!

  • >