Forms & Inputs

Date Picker

Added Jun 9, 2026

A fully custom date picker built from raw PA controls, not the native DatePicker control. Matches the shadcn/ui DatePicker design: trigger button with calendar icon + chevron flip animation, inline calendar panel with month navigation, 42-cell grid gallery. Variables: varDPOpen, varDPViewDate, varDPSelectedDate, varDPFirstDay. Initialize on Screen.OnVisible.

Date

June 2026

CopySnips Live Preview

How to Use

Paste the YAML onto your screen. You will get two controls: conDatePicker (the trigger row) and conCalPanel (the calendar popup).
conCalPanel automatically positions itself below conDatePicker using X: =conDatePicker.X and Y: =conDatePicker.Y + 70, no manual adjustment needed.
On your screen's OnVisible, initialise variables: Set(varDPOpen, false); Set(varDPSelectedDate, Blank()); Set(varDPViewDate, Today()); Set(varDPFirstDay, Date(Year(Today()), Month(Today()), 1))
The selected date is available via varDPSelectedDate.
Use varDPSelectedDate in Filter(), Patch(), or variable assignments anywhere on the screen.
Change lblDateLabel.Text to rename the field label.

Problem Solved

Provides a polished custom date picker with a calendar popup that freely overlays surrounding content. The calendar panel (conCalPanel) lives at screen level (not inside the trigger container) so it is never clipped regardless of where the component is placed.

Integration

Read the chosen date from varDPSelectedDate. Reset with: Set(varDPOpen, false); Set(varDPSelectedDate, Blank()).

- conDatePicker:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.None
      Fill: =RGBA(0, 0, 0, 0)
      Height: =66
      RadiusBottomLeft: =0
      RadiusBottomRight: =0
      RadiusTopLeft: =0
      RadiusTopRight: =0
      Width: =280
    Children:
      - lblDateLabel:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =20
            Size: =11
            Text: ="Date"
            Width: =Parent.Width
            X: =0
            Y: =0
      - conTrigger:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            BorderColor: =RGBA(226, 232, 240, 1)
            BorderStyle: =BorderStyle.Solid
            BorderThickness: =1
            DropShadow: =DropShadow.None
            Fill: =RGBA(255, 255, 255, 1)
            Height: =40
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Width: =Parent.Width
            X: =0
            Y: =26
          Children:
            - imgTriggerCal:
                Control: Image@2.2.3
                Properties:
                  Height: =16
                  Image: |-
                    ="data:image/svg+xml;utf8, " & EncodeUrl(Substitute("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/></svg>", "currentColor", "RGBA(148,163,184,1)"))
                  Width: =16
                  X: =12
                  Y: =12
            - lblTriggerDate:
                Control: Label@2.5.1
                Properties:
                  Color: =If(IsBlank(varDPSelectedDate), RGBA(148, 163, 184, 1), RGBA(30, 41, 59, 1))
                  Font: =Font.'Open Sans'
                  Height: =40
                  Size: =14
                  Text: =If(IsBlank(varDPSelectedDate), "Pick a date", Text(varDPSelectedDate, "[$-en-US]mmmm d, yyyy"))
                  Width: =215
                  X: =36
                  Y: =0
            - imgTriggerChevron:
                Control: Image@2.2.3
                Properties:
                  Height: =14
                  Image: |-
                    =If(varDPOpen,
                      "data:image/svg+xml;utf8, " & EncodeUrl(Substitute("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/></svg>", "currentColor", "RGBA(148,163,184,1)")),
                      "data:image/svg+xml;utf8, " & EncodeUrl(Substitute("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>", "currentColor", "RGBA(148,163,184,1)"))
                    )
                  Width: =14
                  X: =254
                  Y: =13
            - btnTriggerOpen:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Transparent
                  Height: =40
                  OnSelect: |-
                    =Set(varDPOpen, !varDPOpen);
                    Set(varDPViewDate, If(IsBlank(varDPSelectedDate), Today(), varDPSelectedDate));
                    Set(varDPFirstDay, Date(Year(varDPViewDate), Month(varDPViewDate), 1))
                  Text: =""
                  Width: =280
                  X: =0
                  Y: =0
- conCalPanel:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderStyle: =BorderStyle.Solid
      BorderThickness: =1
      DropShadow: =DropShadow.Bold
      Fill: =RGBA(255, 255, 255, 1)
      Height: =263
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Visible: =varDPOpen
      Width: =280
      X: =conDatePicker.X
      Y: =conDatePicker.Y + 70
    Children:
      - conCalHeader:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            DropShadow: =DropShadow.None
            Fill: =RGBA(0, 0, 0, 0)
            Height: =37
            RadiusBottomLeft: =0
            RadiusBottomRight: =0
            RadiusTopLeft: =0
            RadiusTopRight: =0
            Width: =280
            X: =0
            Y: =0
          Children:
            - lblDPMonthYear:
                Control: Label@2.5.1
                Properties:
                  Align: =Align.Center
                  Color: =RGBA(30, 41, 59, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Height: =36
                  Size: =12
                  Text: =Text(varDPViewDate, "[$-en-US]mmmm yyyy")
                  Width: =200
                  X: =40
                  Y: =0
            - btnDPPrev:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Subtle
                  Height: =24
                  Icon: ="ChevronLeft"
                  Layout: ='ButtonCanvas.Layout'.IconOnly
                  OnSelect: |-
                    =Set(varDPViewDate, DateAdd(varDPViewDate, -1, TimeUnit.Months));
                    Set(varDPFirstDay, Date(Year(varDPViewDate), Month(varDPViewDate), 1))
                  Text: =""
                  Width: =24
                  X: =8
                  Y: =6
            - btnDPNext:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Subtle
                  Height: =24
                  Icon: ="ChevronRight"
                  Layout: ='ButtonCanvas.Layout'.IconOnly
                  OnSelect: |-
                    =Set(varDPViewDate, DateAdd(varDPViewDate, 1, TimeUnit.Months));
                    Set(varDPFirstDay, Date(Year(varDPViewDate), Month(varDPViewDate), 1))
                  Text: =""
                  Width: =24
                  X: =248
                  Y: =6
            - rectDPDivider:
                Control: Rectangle@2.3.0
                Properties:
                  Fill: =RGBA(226, 232, 240, 1)
                  Height: =1
                  Width: =280
                  X: =0
                  Y: =36
      - conCalGrid:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            DropShadow: =DropShadow.None
            Fill: =RGBA(0, 0, 0, 0)
            Height: =198
            RadiusBottomLeft: =0
            RadiusBottomRight: =0
            RadiusTopLeft: =0
            RadiusTopRight: =0
            Width: =266
            X: =7
            Y: =45
          Children:
            - galDPDayNames:
                Control: Gallery@2.15.0
                Variant: Horizontal
                Properties:
                  Height: =16
                  Items: =["Su","Mo","Tu","We","Th","Fr","Sa"]
                  LayoutMinHeight: =0
                  LayoutMinWidth: =0
                  ShowScrollbar: =false
                  TemplateSize: =38
                  TemplatePadding: =0
                  Width: =266
                  X: =0
                  Y: =0
                Children:
                  - lblDayName:
                      Control: Label@2.5.1
                      Properties:
                        Align: =Align.Center
                        Color: =RGBA(148, 163, 184, 1)
                        Font: =Font.'Open Sans'
                        FontWeight: =FontWeight.Semibold
                        Height: =Parent.TemplateHeight
                        Size: =10
                        Text: =ThisItem.Value
                        Width: =Parent.TemplateWidth
            - galDPCalDays:
                Control: Gallery@2.15.0
                Variant: Vertical
                Properties:
                  Height: =180
                  Items: =Sequence(42)
                  LayoutMinHeight: =0
                  LayoutMinWidth: =0
                  ShowScrollbar: =false
                  TemplateSize: =30
                  TemplatePadding: =0
                  Width: =266
                  WrapCount: =7
                  X: =0
                  Y: =18
                Children:
                  - imgDPDayCircle:
                      Control: Image@2.2.3
                      Properties:
                        Fill: |-
                          =If(
                            DateAdd(varDPFirstDay, ThisItem.Value - Weekday(varDPFirstDay), TimeUnit.Days) = varDPSelectedDate,
                            RGBA(15, 23, 42, 1),
                            If(DateAdd(varDPFirstDay, ThisItem.Value - Weekday(varDPFirstDay), TimeUnit.Days) = Today(), RGBA(241, 245, 249, 1), RGBA(0, 0, 0, 0))
                          )
                        Height: =28
                        Image: =Blank()
                        RadiusBottomLeft: =14
                        RadiusBottomRight: =14
                        RadiusTopLeft: =14
                        RadiusTopRight: =14
                        Width: =28
                        X: =5
                        Y: =1
                  - lblDPDay:
                      Control: Label@2.5.1
                      Properties:
                        Align: =Align.Center
                        Color: |-
                          =If(
                            DateAdd(varDPFirstDay, ThisItem.Value - Weekday(varDPFirstDay), TimeUnit.Days) = varDPSelectedDate,
                            RGBA(255, 255, 255, 1),
                            If(Month(DateAdd(varDPFirstDay, ThisItem.Value - Weekday(varDPFirstDay), TimeUnit.Days)) <> Month(varDPViewDate), RGBA(203, 213, 225, 1), RGBA(51, 65, 85, 1))
                          )
                        Font: =Font.'Open Sans'
                        FontWeight: |-
                          =If(DateAdd(varDPFirstDay, ThisItem.Value - Weekday(varDPFirstDay), TimeUnit.Days) = varDPSelectedDate, FontWeight.Semibold, FontWeight.Normal)
                        Height: =30
                        Size: =11
                        Text: =Text(Day(DateAdd(varDPFirstDay, ThisItem.Value - Weekday(varDPFirstDay), TimeUnit.Days)))
                        Width: =38
                        X: =0
                        Y: =0
                  - btnDPDaySelect:
                      Control: Button@0.0.45
                      Properties:
                        Appearance: ='ButtonCanvas.Appearance'.Transparent
                        Height: =30
                        OnSelect: |-
                          =Set(varDPSelectedDate, DateAdd(varDPFirstDay, ThisItem.Value - Weekday(varDPFirstDay), TimeUnit.Days));
                          Set(varDPOpen, false)
                        Text: =""
                        Width: =38
                        X: =0
                        Y: =0

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

Date Picker

Label

How to Use

Problem Solved

Integration

YAML Code

Implementation