Skip to content

Commit 49552cb

Browse files
SteveBourdinSteveBourdin
committed
time picker
1 parent f7b718e commit 49552cb

File tree

4 files changed

+288
-0
lines changed

4 files changed

+288
-0
lines changed

‎power-apps/time-picker/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Time Picker
2+
3+
Select a specific time using the interactive time picker. This component lets you quickly choose any time between 00:00 and 23:59 with a clear display and intuitive input.
4+
5+
6+
![time-picker](./assets/time-picker.gif)
7+
8+
9+
## Authors
10+
11+
Snippet|Author
12+
--------|---------
13+
Steve Bourdin | [GitHub](https://github.com/SteveBourdin) ([LinkedIn](https://www.linkedin.com/in/steve-bourdin-ab998762/) )
14+
15+
## Minimal path to awesome
16+
17+
1. Open your canvas app in **Power Apps**
18+
2. Copy the contents of the **[YAML-file](./source/time-picker.yaml)**
19+
3. Click on the three dots of the screen where you want to add the snippet and select "Paste code"
20+
21+
22+
23+
## Code
24+
**[YAML-file](./source/time-picker.yaml)**
25+
26+
27+
## Disclaimer
28+
29+
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
30+
31+
<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-snippets/power-apps/time-picker" aria-hidden="true" />

‎power-apps/time-picker/assets/sample.json

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
[
2+
{
3+
"$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
4+
"name": "pnp-powerplatform-snippets-time-picker",
5+
"version": "1.0.0.0",
6+
"source": "pnp",
7+
"creationDateTime": "2025-04-29T00:00:00.000Z",
8+
"updateDateTime": "2025-04-29T00:00:00.000Z",
9+
"title": "Time Picker",
10+
"shortDescription": "Select a specific time using the interactive time picker. This component lets you quickly choose any time between 00:00 and 23:59 with a clear display and intuitive input.",
11+
"longDescription": [
12+
"Select a specific time using the interactive time picker. This component lets you quickly choose any time between 00:00 and 23:59 with a clear display and intuitive input."
13+
],
14+
"url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/time-picker/",
15+
"products": [
16+
"Power Platform",
17+
"Power Apps",
18+
"powerplatform-snippets",
19+
"power-apps-snippets"
20+
],
21+
"tags": [
22+
],
23+
"categories": [
24+
],
25+
"metadata": [
26+
{
27+
"key": "Product",
28+
"value": "Power Apps"
29+
},
30+
{
31+
"key": "Type",
32+
"value": "Snippet"
33+
}
34+
],
35+
"thumbnails": [
36+
{
37+
"type": "image",
38+
"order": 100,
39+
"url": "https://raw.githubusercontent.com/pnp/powerplatform-snippets/main/power-apps/time-picker/assets/time-picker.gif",
40+
"alt": "Preview PNG"
41+
}
42+
],
43+
"authors": [
44+
{
45+
"gitHubAccount": "SteveBourdin",
46+
"name": "Steve Bourdin",
47+
"pictureUrl": "https://github.com/SteveBourdin.png"
48+
}
49+
]
50+
}
51+
]

‎power-apps/time-picker/assets/time-picker.gif

3.81 MB
Loading

‎power-apps/time-picker/source/time-picker.yaml

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
- cont_input:
2+
Control: GroupContainer@1.3.0
3+
Variant: ManualLayout
4+
Group: TimerPicker
5+
Properties:
6+
Fill: =RGBA(255, 255, 255, 0.7)
7+
Height: =32
8+
Width: =130
9+
X: =763
10+
Y: =284
11+
Children:
12+
- inp_timer:
13+
Control: TextInput@0.0.54
14+
Properties:
15+
Align: =Align.Center
16+
FontColor: =If(IsBlank(var_TimePicker_ChooseTime_Hour)||IsBlank(var_TimePicker_ChooseTime_Min),Color.Gray,Color.DarkBlue)
17+
FontWeight: =FontWeight.Semibold
18+
Height: =Parent.Height
19+
Value: |-
20+
=If(IsBlank(var_TimePicker_ChooseTime_Hour)||IsBlank(var_TimePicker_ChooseTime_Min),"Choose Time", var_TimePicker_ChooseTime_Hour&" : "&var_TimePicker_ChooseTime_Min)
21+
Width: =Parent.Width
22+
- btn_timer:
23+
Control: Classic/Button@2.2.0
24+
Properties:
25+
BorderColor: =ColorFade(Self.Fill, -15%)
26+
Color: =RGBA(255, 255, 255, 1)
27+
DisabledBorderColor: =RGBA(166, 166, 166, 1)
28+
DisabledFill: =Self.Fill
29+
Fill: =RGBA(255, 255, 255, 0)
30+
Font: =Font.'Open Sans'
31+
Height: =Parent.Height
32+
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
33+
HoverColor: =RGBA(255, 255, 255, 1)
34+
HoverFill: =Self.Fill
35+
OnSelect: |-
36+
=UpdateContext({var_TimePicker_ChooseTime : Not var_TimePicker_ChooseTime})
37+
PressedBorderColor: =Self.Fill
38+
PressedColor: =Self.Fill
39+
PressedFill: =Self.Fill
40+
Text: =""
41+
Width: =Parent.Width
42+
- ico_timer:
43+
Control: Classic/Icon@2.5.0
44+
Properties:
45+
BorderColor: =RGBA(0, 18, 107, 1)
46+
Color: =RGBA(0, 18, 107, 1)
47+
Height: =ico_eraser.Height
48+
Icon: =Icon.Clock
49+
PaddingBottom: =5
50+
PaddingLeft: =5
51+
PaddingRight: =5
52+
PaddingTop: =5
53+
Width: =Self.Height
54+
X: =Parent.Width-Self.Width
55+
Y: =ico_eraser.Y
56+
- ico_eraser:
57+
Control: Classic/Icon@2.5.0
58+
Properties:
59+
BorderColor: =RGBA(0, 18, 107, 1)
60+
Color: =RGBA(0, 18, 107, 1)
61+
Fill: =ColorFade(Color.Red,80%)
62+
Height: =3*Parent.Height/4
63+
Icon: =Icon.Erase
64+
OnSelect: =UpdateContext({var_TimePicker_ChooseTime_Hour:Blank(),var_TimePicker_ChooseTime_Min:Blank()})
65+
PaddingBottom: =5
66+
PaddingLeft: =5
67+
PaddingRight: =5
68+
PaddingTop: =5
69+
Visible: =IsBlank(var_TimePicker_ChooseTime_Hour)=false && IsBlank(var_TimePicker_ChooseTime_Min)=false
70+
Width: =Self.Height
71+
X: =Parent.Height/8
72+
Y: =Parent.Height/8
73+
- cont_selecttime:
74+
Control: GroupContainer@1.3.0
75+
Variant: ManualLayout
76+
Group: TimerPicker
77+
Properties:
78+
Fill: =RGBA(255, 255, 255, 0.85)
79+
Height: =cont_input.Height*4
80+
Visible: =var_TimePicker_ChooseTime=true
81+
Width: =cont_input.Width
82+
X: =763
83+
Y: =316
84+
Children:
85+
- gal_hours:
86+
Control: Gallery@2.15.0
87+
Variant: Vertical
88+
Properties:
89+
BorderColor: =RGBA(0, 18, 107, 1)
90+
Default: =LookUp(var_TimePicker_ChooseTime_ListHours,Hour=var_TimePicker_ChooseTime_Hour)
91+
Height: =Parent.Height
92+
Items: =var_TimePicker_ChooseTime_ListHours
93+
ShowScrollbar: =false
94+
TemplatePadding: =0
95+
TemplateSize: =Self.Height/6
96+
Width: =Parent.Width/2
97+
Children:
98+
- lbl_hour:
99+
Control: Label@2.5.1
100+
Properties:
101+
Align: =Align.Center
102+
BorderColor: =RGBA(0, 18, 107, 1)
103+
Color: |-
104+
=If(
105+
ThisItem.Value = gal_hours.Selected.Value,
106+
Color.White,
107+
Color.Black
108+
)
109+
Fill: |-
110+
=If(
111+
ThisItem.Value = gal_hours.Selected.Value,
112+
Color.Blue,
113+
RGBA(
114+
255,
115+
255,
116+
255,
117+
0
118+
)
119+
)
120+
Font: =Font.'Open Sans'
121+
Height: =Parent.TemplateHeight
122+
OnSelect: =UpdateContext({var_TimePicker_ChooseTime_Hour:ThisItem.Hour})
123+
Size: =11
124+
Text: =ThisItem.Hour
125+
Width: =Parent.Width
126+
- gal_mins:
127+
Control: Gallery@2.15.0
128+
Variant: Vertical
129+
Properties:
130+
BorderColor: =RGBA(0, 18, 107, 1)
131+
Default: =LookUp(var_TimePicker_ChooseTime_ListMins,Min = var_TimePicker_ChooseTime_Min)
132+
Height: =Parent.Height
133+
Items: =var_TimePicker_ChooseTime_ListMins
134+
ShowScrollbar: =false
135+
TemplatePadding: =0
136+
TemplateSize: =Self.Height/6
137+
Width: =Parent.Width/2
138+
X: =gal_hours.Width
139+
Children:
140+
- lbl_min:
141+
Control: Label@2.5.1
142+
Properties:
143+
Align: =Align.Center
144+
BorderColor: =RGBA(0, 18, 107, 1)
145+
Color: |-
146+
=If(
147+
ThisItem.Value = gal_mins.Selected.Value,
148+
Color.White,
149+
Color.Black
150+
)
151+
Fill: |-
152+
=If(
153+
ThisItem.Value = gal_mins.Selected.Value,
154+
Color.Blue,
155+
RGBA(
156+
255,
157+
255,
158+
255,
159+
0
160+
)
161+
)
162+
Font: =Font.'Open Sans'
163+
Height: =Parent.TemplateHeight
164+
OnSelect: |-
165+
=UpdateContext({var_TimePicker_ChooseTime_Min: ThisItem.Min});
166+
If(
167+
IsBlank(var_TimePicker_ChooseTime_Hour) = false,
168+
UpdateContext({var_TimePicker_ChooseTime: false})
169+
)
170+
Size: =11
171+
Text: =ThisItem.Min
172+
Width: =Parent.Width
173+
- tim_initialize:
174+
Control: Timer@2.1.0
175+
Properties:
176+
AutoStart: =true
177+
BorderColor: =ColorFade(Self.Fill, -15%)
178+
Color: =RGBA(255, 255, 255, 1)
179+
DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)
180+
DisabledColor: =ColorFade(Self.Fill, 90%)
181+
DisabledFill: =ColorFade(Self.Fill, 70%)
182+
Fill: =RGBA(56, 96, 178, 1)
183+
Font: =Font.'Open Sans'
184+
HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
185+
HoverColor: =RGBA(255, 255, 255, 1)
186+
HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
187+
OnTimerStart: |-
188+
=UpdateContext(
189+
{
190+
var_TimePicker_ChooseTime_ListHours: AddColumns(
191+
Sequence(24),
192+
Hour,
193+
Text(
194+
Value - 1,
195+
"00"
196+
)
197+
),
198+
var_TimePicker_ChooseTime_ListMins : AddColumns(Sequence(60),Min,Text(Value-1,"00"))
199+
}
200+
)
201+
PressedBorderColor: =Self.Fill
202+
PressedColor: =Self.Fill
203+
PressedFill: =Self.Color
204+
Start: =true
205+
Visible: =false
206+
Y: =40

0 commit comments

Comments
 (0)