pnp · Laskewitz · Aug 2, 2025 · Jul 18, 2025 · Jul 18, 2025
diff --git a/power-apps/time-picker/README.md b/power-apps/time-picker/README.md
@@ -0,0 +1,31 @@
+# Time Picker
+
+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.
+
+
+![time-picker](./assets/time-picker.gif)
+
+
+## Authors
+
+Snippet|Author
+--------|---------
+Steve Bourdin | [GitHub](https://github.com/SteveBourdin) ([LinkedIn](https://www.linkedin.com/in/steve-bourdin-ab998762/) )
+
+## Minimal path to awesome
+
+1. Open your canvas app in **Power Apps**
+2. Copy the contents of the **[YAML-file](./source/time-picker.yaml)** 
+3. Click on the three dots of the screen where you want to add the snippet and select "Paste code"
+
+
+
+## Code
+ **[YAML-file](./source/time-picker.yaml)** 
+
+
+## Disclaimer
+
+**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.**
+
+<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-snippets/power-apps/time-picker" aria-hidden="true" />
diff --git a/power-apps/time-picker/assets/sample.json b/power-apps/time-picker/assets/sample.json
@@ -0,0 +1,51 @@
+[
+  {
+    "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
+    "name": "pnp-powerplatform-snippets-time-picker",
+    "version": "1.0.0.0",
+    "source": "pnp",
+    "creationDateTime": "2025-04-29T00:00:00.000Z",
+    "updateDateTime": "2025-04-29T00:00:00.000Z",
+    "title": "Time Picker",
+    "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.",
+    "longDescription": [
+      "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."
+    ],
+    "url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/time-picker/",
+    "products": [
+      "Power Platform",
+      "Power Apps",
+      "powerplatform-snippets",
+      "power-apps-snippets"
+    ],
+    "tags": [
+    ],
+    "categories": [
+    ],
+    "metadata": [
+      {
+        "key": "Product",
+        "value": "Power Apps"
+      },
+      {
+        "key": "Type",
+        "value": "Snippet"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://raw.githubusercontent.com/pnp/powerplatform-snippets/49552cb8dfd123db7bec59a1bc6f36f27a9bea7d/power-apps/time-picker/assets/time-picker.gif",
+        "alt": "Preview PNG"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "SteveBourdin",
+        "name": "Steve Bourdin",
+        "pictureUrl": "https://github.com/SteveBourdin.png"
+      }
+    ]
+  }
+]
diff --git a/power-apps/time-picker/assets/time-picker.gif b/power-apps/time-picker/assets/time-picker.gif
diff --git a/power-apps/time-picker/source/time-picker.yaml b/power-apps/time-picker/source/time-picker.yaml
@@ -0,0 +1,206 @@
+- cont_input:
+    Control: [email protected]
+    Variant: ManualLayout
+    Group: TimerPicker
+    Properties:
+      Fill: =RGBA(255, 255, 255, 0.7)
+      Height: =32
+      Width: =130
+      X: =763
+      Y: =284
+    Children:
+      - inp_timer:
+          Control: [email protected]
+          Properties:
+            Align: =Align.Center
+            FontColor: =If(IsBlank(var_TimePicker_ChooseTime_Hour)||IsBlank(var_TimePicker_ChooseTime_Min),Color.Gray,Color.DarkBlue)
+            FontWeight: =FontWeight.Semibold
+            Height: =Parent.Height
+            Value: |-
+              =If(IsBlank(var_TimePicker_ChooseTime_Hour)||IsBlank(var_TimePicker_ChooseTime_Min),"Choose Time", var_TimePicker_ChooseTime_Hour&" : "&var_TimePicker_ChooseTime_Min)
+            Width: =Parent.Width
+      - btn_timer:
+          Control: Classic/[email protected]
+          Properties:
+            BorderColor: =ColorFade(Self.Fill, -15%)
+            Color: =RGBA(255, 255, 255, 1)
+            DisabledBorderColor: =RGBA(166, 166, 166, 1)
+            DisabledFill: =Self.Fill
+            Fill: =RGBA(255, 255, 255, 0)
+            Font: =Font.'Open Sans'
+            Height: =Parent.Height
+            HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
+            HoverColor: =RGBA(255, 255, 255, 1)
+            HoverFill: =Self.Fill
+            OnSelect: |-
+              =UpdateContext({var_TimePicker_ChooseTime : Not var_TimePicker_ChooseTime})
+            PressedBorderColor: =Self.Fill
+            PressedColor: =Self.Fill
+            PressedFill: =Self.Fill
+            Text: =""
+            Width: =Parent.Width
+      - ico_timer:
+          Control: Classic/[email protected]
+          Properties:
+            BorderColor: =RGBA(0, 18, 107, 1)
+            Color: =RGBA(0, 18, 107, 1)
+            Height: =ico_eraser.Height
+            Icon: =Icon.Clock
+            PaddingBottom: =5
+            PaddingLeft: =5
+            PaddingRight: =5
+            PaddingTop: =5
+            Width: =Self.Height
+            X: =Parent.Width-Self.Width
+            Y: =ico_eraser.Y
+      - ico_eraser:
+          Control: Classic/[email protected]
+          Properties:
+            BorderColor: =RGBA(0, 18, 107, 1)
+            Color: =RGBA(0, 18, 107, 1)
+            Fill: =ColorFade(Color.Red,80%)
+            Height: =3*Parent.Height/4
+            Icon: =Icon.Erase
+            OnSelect: =UpdateContext({var_TimePicker_ChooseTime_Hour:Blank(),var_TimePicker_ChooseTime_Min:Blank()})
+            PaddingBottom: =5
+            PaddingLeft: =5
+            PaddingRight: =5
+            PaddingTop: =5
+            Visible: =IsBlank(var_TimePicker_ChooseTime_Hour)=false && IsBlank(var_TimePicker_ChooseTime_Min)=false
+            Width: =Self.Height
+            X: =Parent.Height/8
+            Y: =Parent.Height/8
+- cont_selecttime:
+    Control: [email protected]
+    Variant: ManualLayout
+    Group: TimerPicker
+    Properties:
+      Fill: =RGBA(255, 255, 255, 0.85)
+      Height: =cont_input.Height*4
+      Visible: =var_TimePicker_ChooseTime=true
+      Width: =cont_input.Width
+      X: =763
+      Y: =316
+    Children:
+      - gal_hours:
+          Control: [email protected]
+          Variant: Vertical
+          Properties:
+            BorderColor: =RGBA(0, 18, 107, 1)
+            Default: =LookUp(var_TimePicker_ChooseTime_ListHours,Hour=var_TimePicker_ChooseTime_Hour)
+            Height: =Parent.Height
+            Items: =var_TimePicker_ChooseTime_ListHours
+            ShowScrollbar: =false
+            TemplatePadding: =0
+            TemplateSize: =Self.Height/6
+            Width: =Parent.Width/2
+          Children:
+            - lbl_hour:
+                Control: [email protected]
+                Properties:
+                  Align: =Align.Center
+                  BorderColor: =RGBA(0, 18, 107, 1)
+                  Color: |-
+                    =If(
+                        ThisItem.Value = gal_hours.Selected.Value,
+                        Color.White,
+                        Color.Black
+                    )
+                  Fill: |-
+                    =If(
+                        ThisItem.Value = gal_hours.Selected.Value,
+                        Color.Blue,
+                        RGBA(
+                            255,
+                            255,
+                            255,
+                            0
+                        )
+                    )
+                  Font: =Font.'Open Sans'
+                  Height: =Parent.TemplateHeight
+                  OnSelect: =UpdateContext({var_TimePicker_ChooseTime_Hour:ThisItem.Hour})
+                  Size: =11
+                  Text: =ThisItem.Hour
+                  Width: =Parent.Width
+      - gal_mins:
+          Control: [email protected]
+          Variant: Vertical
+          Properties:
+            BorderColor: =RGBA(0, 18, 107, 1)
+            Default: =LookUp(var_TimePicker_ChooseTime_ListMins,Min = var_TimePicker_ChooseTime_Min)
+            Height: =Parent.Height
+            Items: =var_TimePicker_ChooseTime_ListMins
+            ShowScrollbar: =false
+            TemplatePadding: =0
+            TemplateSize: =Self.Height/6
+            Width: =Parent.Width/2
+            X: =gal_hours.Width
+          Children:
+            - lbl_min:
+                Control: [email protected]
+                Properties:
+                  Align: =Align.Center
+                  BorderColor: =RGBA(0, 18, 107, 1)
+                  Color: |-
+                    =If(
+                        ThisItem.Value = gal_mins.Selected.Value,
+                        Color.White,
+                        Color.Black
+                    )
+                  Fill: |-
+                    =If(
+                        ThisItem.Value = gal_mins.Selected.Value,
+                        Color.Blue,
+                        RGBA(
+                            255,
+                            255,
+                            255,
+                            0
+                        )
+                    )
+                  Font: =Font.'Open Sans'
+                  Height: =Parent.TemplateHeight
+                  OnSelect: |-
+                    =UpdateContext({var_TimePicker_ChooseTime_Min: ThisItem.Min});
+                    If(
+                        IsBlank(var_TimePicker_ChooseTime_Hour) = false,
+                        UpdateContext({var_TimePicker_ChooseTime: false})
+                    )
+                  Size: =11
+                  Text: =ThisItem.Min
+                  Width: =Parent.Width
+      - tim_initialize:
+          Control: [email protected]
+          Properties:
+            AutoStart: =true
+            BorderColor: =ColorFade(Self.Fill, -15%)
+            Color: =RGBA(255, 255, 255, 1)
+            DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)
+            DisabledColor: =ColorFade(Self.Fill, 90%)
+            DisabledFill: =ColorFade(Self.Fill, 70%)
+            Fill: =RGBA(56, 96, 178, 1)
+            Font: =Font.'Open Sans'
+            HoverBorderColor: =ColorFade(Self.BorderColor, 20%)
+            HoverColor: =RGBA(255, 255, 255, 1)
+            HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)
+            OnTimerStart: |-
+              =UpdateContext(
+                  {
+                      var_TimePicker_ChooseTime_ListHours: AddColumns(
+                          Sequence(24),
+                          Hour,
+                          Text(
+                              Value - 1,
+                              "00"
+                          )
+                      ),
+                      var_TimePicker_ChooseTime_ListMins : AddColumns(Sequence(60),Min,Text(Value-1,"00"))
+                  }
+              )
+            PressedBorderColor: =Self.Fill
+            PressedColor: =Self.Fill
+            PressedFill: =Self.Color
+            Start: =true
+            Visible: =false
+            Y: =40