Make A Time Picker In Power Apps

Make A Time Picker In Power Apps

I often wonder why there is not any Time Picker control included in Power Apps. Date and Time values are found in almost every app I’ve ever made and I’m not alone. At least 14,000 people have read this forum post looking for an answer. Yet, we still have to build it ourselves. In this article, I will show you how to make a Time Picker in Power Apps as shown in the image below.




Building the Hours Gallery

A Time Picker control is something you will use over-and-over again so its best to build it as a canvas app component. Open Power Apps Studio and go to the Components screen. Create a new component called cmp_TimePicker.



The component cmp_TimePicker should have these properties.

Fill: White
Height: 430
Width: 285



Next, add a new gallery to the component called gal_TimePicker_Hours.



The gallery should have the same height as the component and 1/3 of the width of the component to allow for hours, minutes and AM/PM. Use the properties below in the gallery.

Fill: Transparent
Height: Parent.Height
TemplateSize: 60
Width: Parent.TemplateWidth/3



To populate the gallery with Hours we can put a Sequence function in the Items property. We’ll format the number with a leading zero too for consistency.

ForAll(Sequence(12), Text(Value,"[$-en-US]00"))



Now place a label called lbl_MobileTimePicker_Hours in the gallery with the code ThisItem.Value in the Text property to see the options for hours.




Styling the Component


We should style the Hours gallery before moving onto the Minutes and AM/PM galleries. That way we can copy & paste the 1st gallery and code the style only once. Set the properties of lbl_TimePicker_Hours equal to the code shown below.

Align: Center
Color: Black
Height: Parent.TemplateHeight
Text: ThisItem.Value
Width: Parent.TemplateWidth
X: 0
Y: 0



We want to change the color of the Hours gallery item to show what the user has selected. This component could be re-used in several apps so its a good idea to create new properties to control the label’s color and fill. Make two new input properties called SelectedColor and SelectedFill.




Then add this code to the properties for cmp_TimePicker.

SelectedColor: White
SelectedFill: DodgerBlue



Now that we’ve setup everything that’s needed our goal will be to make the TimePicker component behave like this.



Write this code in each respective property of lbl_TimePicker_Hours to get the desired result.

Color:
If(ThisItem.IsSelected, cmp_TimePicker.SelectedColor, Black)

HoverColor:
Self.Color

PressedColor:
Self.Color

Fill:
If(ThisItem.IsSelected, cmp_TimePicker.SelectedFill, Transparent)

HoverFill:
If(!ThisItem.IsSelected, ColorFade(cmp_TimePicker.SelectedFill, 70%))

PressedFill:
Self.HoverFill



Finally, to hide the scrollbar change the ShowScrollbar property of the gallery to false. The Hours gallery is now completed.




Minutes & AM/PM Galleries

To create the minutes gallery copy & paste the hours gallery directly beside it. Rename the gallery to gal_TimePicker_Minutes.



Replace any code in the Items property with this code to generate the minutes values from 00 to 59.

ForAll(Sequence(60), Text(Value-1,"[$-en-US]00"))


To create the AM/PM gallery copy and paste once more and rename the gallery to gal_TimePicker_AMPM.



Put this code in the Items property of the gallery instead.

["AM","PM"]



With all of the galleries created the last control to add is a label called lbl_TickerPicker_Border which will act as a border. Make sure the label is at the bottom of the tree view.



Use this code in the following properties of the label.

BorderColor: Black
BorderThickness: 4
Height: Parent.Height
Width: Parent.Width
X: 0
Y: 0




Output A Time Value

Our component needs to output a time value once a user makes their selection. To do this click and highlight all three galleries…



… then write this code in the OnSelect property to set a variable to store the time.

Set(
    varTimeValue,
    Time(
        Value(gal_TimePicker_Hours.Selected.Value)
        - If(
            Value(gal_TimePicker_Hours.Selected.Value)=12, 12)
        + If(
            gal_TimePicker_AMPM.Selected.Value = "PM",
            12,
            0
        ),
        Value(gal_TimePicker_Minutes.Selected.Value),
        0
    )
)


Now when you click on values in the gallery the time will be updated. To see how it works you can temporarily put a label inside the gallery with varTimeValue as the Text property. Delete the label once you’re done testing.



Create a new property called Value to give the ability to reference your time value in the app.



Then put this code in the Value property of cmp_TimePicker.

varTimeValue





Positioning Gallery Items

When the hours, minutes or AM/PM are clicked inside the gallery I want them to snap to the top of the component. We will need a new property called Default to accomplish this. Make sure to check the box that says Raise OnReset when value changes.



The Default value of cmp_TimePicker should be 01:00 AM unless otherwise defined. Do this by using Time(1, 0, 0) in the property.



Next comes some fairly complex code to define the selection positioning for each gallery. Put this code in the Default property of the Hours gallery.

If(
    cmp_TimePicker.Default=Blank()
    And varTimeValue=Blank(),

    // value when no default is supplied
    {Value: "01"},

    // value when default is supplied or hours were clicked
    With(
        {
            wTime: Coalesce(
                varTimeValue,
                cmp_TimePicker.Default
            )
        },
        LookUp(
            Self.AllItems.Value,
            Value = Text(
                If(Mod(Hour(wTime),12)=0,12, Mod(Hour(wTime),12)),
                "[$-en-US]00"
            )
        )
    )
)



Then write this code in the Default property of the Minutes gallery.

With(
    {
        wTime: Coalesce(
            varTimeValue,
            cmp_TimePicker.Default
        )
    },
    LookUp(
        Self.AllItems.Value,
        Value = Text(
            Minute(wTime),
            "[$-en-US]00"
        )
    )
)


And use this code in the Default property of the AMPM gallery.

With(
    {
        wTime: Coalesce(
            varTimeValue,
            cmp_TimePicker.Default
        )
    },
    If(
        Hour(varTimeValue) < 12,
        {Value: "AM"},
        {Value: "PM"}
    )
)


When the user clicks the gallery we must reset it in order to show the clicked values at the top. Put this code in the OnReset property of cmp_TimePicker to do just that.

Reset(gal_TimePicker_Hours);
Reset(gal_TimePicker_Minutes);
Reset(gal_TimePicker_AMPM);
Set(varTimeValue, Blank())




Using The Time Picker In An App

Now that we’ve completed the component lets try using it in an app. Place a new text box on the screen that we can display the time value in. I’ve added a clock icon to this text box to indicate a time value.


Add the Time Picker component and position it beside the text box.



To show the selected time inside the text input copy & paste this code into the text input’s Default property.

Text(cmp_Sample_MobileTimePicker.Value, ShortTime)



Insert a new label onto the screen to act as an overlay. When the user clicks it the component should disappear. Make sure the label is above the text input and below the Time Picker in the tree view.



Put this code in the following properties for the overlay.

OnSelect: Set(varShowTimePicker, false)
Visible: varShowTimePicker



Use this code in the OnSelect property of the Text Input.

Set(varShowTimePicker, true)



Then change the Visible property of the Time Picker to this code.

varShowTimePicker



All of your hard work has paid-off. Now you have an awesome looking reusable time picker.





Questions?

If you have any questions or feedback about Make A Time Picker In Power Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest
38 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Necdet Saritas
Necdet Saritas
1 year ago

You just rock and roll all cats:) Thanks. Great job Matthew

Mike
Mike
1 year ago

Yet another great solution Matthew.
question for you, how would you alter this component to add ok cancel buttons to set the date and hide on ok, and just hide on cancel? I’ve had challenges with buttons on components hiding the component itself as well as keeping the code with what to do with value back in the screen, external to the component,
thanks

myk
myk
1 year ago

This is great! Appreciate the efforts. However, I am facing an issue with having a time value in the variable ‘varTimeValue’. So this is not working for me. if I hover my mouse over varTimeVaue in the code snippet, it shows “varTimeValue=PowerApps encountered an internal error trying to evaluate this expression”
However, when I hover the mouse over ‘Time‘ it shows the correct values

This is the snippet where I get the above error on “OnSelect”

Set(
  varTimeValue,
  Time(
    Value(gal_Hrs.Selected.Value)
    – If(
      Value(gal_Hrs.Selected.Value)=12, 12)
    + If(
      gal_AMPM.Selected.Value = “PM”,
      12,
      0
    ),
    Value(gal_Mins.Selected.Value),
    0
  )
)

Any idea what could be wrong?

David
David
1 year ago

Was hoping to use this for TimeIn and TimeOut fields in a Gallery. But it changes the time in all the records in the Gallery. Any way to not have it do that and only populate the record in the Gallery you are calling it from? Still unbelievable that MS hasn’t put such a control in place.Your help has been filling gaps that developers need, thanks!

David
David
1 year ago

Great, thanks!

Donald
Donald
4 months ago

I’m currently using your tutorial and honestly, it’s brilliant.
Same as David, I added two text inputs (start time & end time) and would like to use the same time picker for both (basically following your steps to the letter, albeit adding a second text input).

Where can I adapt the code to output the time value selected to its corresponding field?

Thanks in advance for your help

Hussain
Hussain
2 months ago

Hi sir,
Great article as always. I am new to the PowerApps & facing some issues regarding this. Can you please tell me where should I use this Patch() function. [ OnSelect of gallery or somewhere else.]
Gallery Name : Gallery2
Text input Name : TextInput2

Thank you in advance.

André van Onselen
André van Onselen
1 year ago

This is awesome! Thanks for the info.

The only question i have is:
Why don’t use the function UpdateContext({varShowTimePicker:!varShowTimePicker}) instead of all the trouble with overlays?

Last edited 1 year ago by André van Onselen
André van Onselen
André van Onselen
1 year ago

Hi Matthew thanks again for sharing this blog.

Because it helped me a lot I wanted to share a quick best practice for adding up and down buttons. I write you from the Netherlands and here we use a slightly different time notation (24h) and a different seperator in formula’s (; instead of ,).

Step 1: Add 2 ▲ icons and put one above the hours gallery (IcHA) and one above the minutes gallery (IcMA).
Step 2: Add 2 ▼ icons and put one below the hours gallery (IcHB) and one below the minutes gallery (IcMB).
Step 3: Set the OnSelect property
IcHA:

Set(var_TimeValue;Time(Value(Gallery_Hours.Selected.Value-1);Value(Gallery_Minutes.Selected.Value);0))

IcMA:

Set(var_TimeValue;Time(If(Value(Gallery_Minutes.Selected.Value)=00;Value(Gallery_Hours.Selected.Value-1);Value(Gallery_Hours.Selected.Value));If(Value(Gallery_Minutes.Selected.Value)=00;59;Value(Gallery_Minutes.Selected.Value-1));0))

IcHB:

Set(var_TimeValue;Time(Value(Gallery_Hours.Selected.Value+1);Value(Gallery_Minutes.Selected.Value);0))

IcMB:

Set(var_TimeValue;Time(If(Value(Gallery_Minutes.Selected.Value)=59;Value(Gallery_Hours.Selected.Value+1);Value(Gallery_Hours.Selected.Value));If(Value(Gallery_Minutes.Selected.Value)=59;00;Value(Gallery_Minutes.Selected.Value+1));0))

Result: data:image/png;base64,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

Lorna
Lorna
3 months ago

Where would I use the UpdateContext function? This sounds like a much better solution for me as I have very limited space.

Lorna Pirozzolo
Lorna Pirozzolo
3 months ago

Fantastic, thank you Matthew. New to PowerApps but do learn fast 🙂

Sean Corry
Sean Corry
1 year ago

Hi Matthew, Awesome stuff thank you for the clear and concise documentation. I find that client requests are typically not for granular minutes, but for 15 minute segments. Have you done this with segments for minute options, :00, :15, :30, etc. ?

Chris
Chris
1 year ago

Hi Softic, I was running into a similar issue. I created the text input inside the component instead of on the screen and made these changes.

I updated the “Default” property of the text input to: If(IsBlank(varTimeValue),TimeValue(Text(cmp_TimePicker.Default,”[$-en-US]hh:mm:ss”)),varTimeValue)
This sets the default value to a variable. If the variable is blank it uses the default of the component.

I then updated the “OnChanges” property of the text input to update this variable.
Set(varTimeValue,TimeValue(time_input.Text))

I allowed the text input to be reset. So I set “Reset” to true.

In each of the galleries, I updated the “OnSelect” property to reset the text input to the default value:
Set(varTimeValue,
Time(Value(gal_TimePicker_Hours.Selected.Value) – If(Value(gal_TimePicker_Hours.Selected.Value)=12, 12) + If(Text(gal_TimePicker_AMPM.Selected.Value) = “PM”,12,0),
Value(gal_TimePicker_Minutes.Selected.Value),0)); Reset(txt_input_time);

Here the name of my text input is “txt_input_time”. This updates the variable varTimeValue on select and then resets the text input (so that it defaults to varTimeValue). I think I was having issues with the OnSelect of the gallery, so I also added it to the OnSelect of the labels inside of the gallery (Ex: lbl_TimePicker_AMPM).

If you put the text_input inside the component like I do, you may need to update the X, Y, Width, and Height variables of the galleries and text input to be equal to the dimensions (X, Y, Width, Height) of the component itself. This helps align everything and makes size/shape more editable in the screen.

Let me know if that works,
Chris

Josh
1 year ago

Is it possible to use this to capture multiple time fields without having to create copies of all the elements on the same screen?
Example: Mon Start Time / Tues Start Time / Wed Start Time / etc

Dave
Dave
1 year ago

Heya Matthew,

thank you for this amazing timepicker 🙂 Im pretty new to PowerApps and struggling with getting the Time from the TimePicker and a Date from a DatePicker into a Sharepoint List. I got this thing in a Card within a Form and to push the values to the list I use SubmitForm. For the DateTime Value I have this Code in the Update Property of the DateTime Card:

DateValue1.SelectedDate & TimeValue(cmp_TimePicker_1.Value, DateTimeZone.UTC)

I also tried “+ Text” (this enters a wrong date into the List) and “& Time” (This shows a code error). I don’t understand why it is telling me that Time or TimeValue is wrong in this case.

Can you help me solve this?

Cheers,
Dave

Samantha
Samantha
1 year ago

Hi Matthew,

Thanks for the article. It is very helpful. How do you achieve the last part where you click outside the component and the time component pop up disappears?

Jessie
Jessie
1 year ago

Hi Matthew.

This looks amazing, great job! I was playing around this as well, but did not manage to work in my end. I have set the text property of my label inside the component to the variable varTimeValue. But when I select anything it does not show any value in the label.
Do you have any idea on this? I followed everything in the steps above.

Jessie
Jessie
1 year ago

Hi Matthew,

This looks amazing and I did follow your steps above to create the time picker. However, for me it did not work. Even if I followed everything. When I try to select a number in the hours, minutes and AM/PM sections it does not show the value in the label I created. It looks like it does not work for the onselection property. I even assigned the variable “varTimeValue” for a label or textbox I added in the company but does not render any value after I select anything.

Sam Draper
3 months ago

Thanks!
This will streamloine an application we are currently working on

Brian GC
Brian GC
3 months ago

Hi Matthew,

This is nice! Thank you.

I tried to use the component in a new screen and in a DataCard (default template that comes with showing share point data). The selected time value is seen in the Screen clearly but not in the Data Card.

Wondering why. Any thoughts?

Brian GC
Brian GC
3 months ago

I have a share point list. I am using this data to display the list of items using data cards. For example if the list has equipment number, description and time of installation. I can see the list of my equipments using the data card template (template that come in the list of templates when we start to create an app) . The template is nothing but a collection of items that contain labels or input text boxes or any other controls. Let us say I want to modify the attribute of one of those items that contains the time of installation. I imported the time picker component and am able to select the hour, minute and am/pm flawlessly. However, I am not able to capture the selected time into a label sitting next to the time picker for that item.

while testing the component independently in a separate screen the results come as expected.

Last edited 3 months ago by Brian GC
Bernd Stoeckel
Bernd Stoeckel
3 months ago

That looks really great, thanks! Just one thing.. I seem to be unable to find the varTimeValue when I try to use it in ‘Value’ of the component. While testing, I can find it (using it in a label). I also see the variable as a global variable in the app. Only in Value of the component it returns an error and I don’t see why..

Bernd Stoeckel
Bernd Stoeckel
2 months ago
Reply to  Bernd Stoeckel

This is resolved btw:
I needed to give access to the scope of the app

David
David
2 months ago

Hi Matthew,

I’ve been trying to use this time picker with a separate date picker. In the dataverse table the time shows a default date of 1970 is there a way to change this date so that it uses the date pickers date for the date?

Sayed Tufel
Sayed Tufel
2 months ago

Hi Mathew I have used your component in my app, but after submitting the form time value is not resetting to parent.default.

Please reply it is crucial for me

Pantelis
Pantelis
26 days ago

Great article and its working like a charm. I have only one question: When I am using the component inside an app, then I need to double click on each gallery (hours, minutes and AM/PM) to select an item. Any ideas?

Ferds
Ferds
19 days ago

What if I want to use the time picker component inside a form with data cards?