How to Use Power Apps Date Picker Control [With Various Examples]

Did you know how to use Power Apps Date picker control? If Not!, I will help you understand in this Power Apps tutorial by explaining everything related to Power Apps Date picker control.”

Moreover, I will explain the properties of a Power Apps date picker control and many more examples like:

  • How to add Power Apps Date picker control
  • Working with a Date picker control in Power Apps
  • Power Apps Date Picker format

Power Apps Date Picker Control

Power Apps Date picker control is a user-selectable control to specify a date. Using this control, users can select a date from an interactive calendar.

The main objective of this control is to enhance the user experience by minimizing the risk of errors while inputting dates.

Add Power Apps date picker control

This is the overview of Date picker control in Power Apps.

Power Apps Date Picker Control Properties

Here, I will explain the properties of Power Apps date picker control:

Property NameDescription
AccessibleLabelThis property is assigned to a screen reader label.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
DateTimeZoneIt specifies whether to display the date in Coordinated Universal Time (UTC) or the user’s local time.
DefaultDateWhen the user opens the app, the specific date will be selected unless the user changes it. By default, the date picker will select today’s date.
DisabledBorderColorWhen the DisplayMode property of the control is set to Disabled, it indicates a color for the control’s border.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
EndYearThe date-picker control allows users to select dates up to a specified year.
FocusedBorderColorThis defines the color of a control’s border when the control is in focus.
FormatThis control allows the user to specify a date in text format. The default property is ShortDate,[the control displays 12/31/2017.] Alternatively, you can set the Format property to LongDate [30 November/2020].
InputTextPlaceholderThis setting determines whether the Date Picker text is editable. Changes can only be made by using the calendar when set to false.
IsEditableThe distance between the text and the bottom edge of the control.
LanguageThis property determines the language used to format dates, including the months’ names. If not specified, the language is determined by the user’s device settings. The available values are “EN-us” and “FR.”
OnChangeWhen the user changes a date, it specifies what action to perform.
OnSelectWhen the user clicks on a control, it specifies what action to perform.
PaddingBottomThe distance between the text and the bottom edge of control.
ResetThe distance between the text and the bottom edge of the control.
StartOfWeekThe distance between the text and the bottom edge of the control.
StartYearThis value represents the minimum year selectable by the user in a date-picker control.
VisibleThis represents the day of the week to be displayed in the initial column of the date-picker control.

These are the properties of the Power Apps date picker control.

How to Add a Date Picker Control in Power Apps

This section will show you how to add a Power Apps date picker control.

  • Sign into Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert a Date picker control.[Click on +Insert -> Expand Input -> Select Date Picker].
Add Power Apps date picker control
  • By default, the toggle control name will be “DatePicker1“; you can Rename it using “dte” based on your requirement.
How to add Power Apps date picker control

This is how we can insert a Power Apps toggle control.

How to Use Power Apps Date Picker Control

This section will show you how to work with a Power Apps date picker control with the examples below.

Example 1:

I created a Power Apps canvas app and added a Date picker and Text label control. Whenever the user selects a particular date from the date picker, the text label will display the selected date details [Long date format] as shown below:

How to use Power Apps Date picker control

Let me show you how to achieve this:

  • On the Power Apps screen, insert the Date picker control as shown below:
How to use Date picker in Power Apps
  • Now, I will rename the date picker to “dte_SelectedDate,” as shown below:
Date picker in Power Apps
  • Insert a Text label control -> Set its Text property to:
Text(
    DateTimeValue(dte_SelectedDate.SelectedDate),
    DateTimeFormat.LongDateTime
)

Where,

  1. dte_SelectedDate = Date picker control name
How to work with a Power Apps date picker control
  • Once the app is ready, SavePublish, and Preview the app. The text label will display the selected date [long date format] whenever the user selects a date from the date picker.
How to work with date picker in Power Apps

Example 2:

I have a SharePoint list [Project Details] that has various columns like:

Column NameDate Type
Project NameTitle
Project Start DateDate and time
Power Apps date picker examples

On my Power Apps screen, I have added a Date picker control; whenever the user selects a particular date from a date picker control, the Gallery control will display the Project name based on the above SharePoint list.

Power Apps Date picker control

Let me show you how to achieve this:

  • On the Power Apps screen, insert a Date picker control as shown below:
How to use date time picker in PowerApps
  • Insert a Gallery control -> Set its Items property to:
Filter(
    'Project Details',
    'Project Start Date' = Dte_ProjectStartDate.SelectedDate
).Title

Where,

  1. Project Details = SharePoint list name
  2. Project Start Date = SharePoint list date column name
  3. Dte_ProjectStartDate = Date-picker control name
  4. Title = SharePoint list title column
Add date picker control in Power Apps
  • SavePublish, and Preview the app. The Gallery control will display the Project name based on the SharePoint list above each time the user chooses a date using a date picker control.
Power Apps Date picker

This is how we can work with a date picker control in Power Apps.

Power Apps Date Picker Format

This section will help you understand PowerApps DatePicker Format.

  • On the Power Apps date picker control, we have a property called “Format.” By default, the Format property is set to ShortDate [the control displays 08/11/2023.]
DateTimeFormat.ShortDate
  • If the Format property is set to ShortDate, we can set the Power Apps date picker Language property to “en-us.”
Date picker format in Power Apps
  • Alternatively, you can set the Format property to LongDate [the control displays “Tuesday, December 12, 2023”.]
DateTimeFormat.LongDate
  • However, if the Format property is set to LongDate, we can set the Power Apps date picker Language property to “fr-fr.
Power Apps date picker format

This is all about the Power Apps date picker format.

Conclusion

I hope this Power Apps tutorial gave you all the details about the Power Apps Date Picker Control, like what it is, its essential properties, and how to add a date picker control in Power Apps.

Also, we saw how to use and format a Power Apps Date picker control with various examples.

Also, you may like some more Power Apps tutorials: