Power Apps Modern Date Picker Control [How to Use]

by
Power Apps Modern Date picker control

Interested in learning more about Power Apps Modern Date Picker Control? This Power Apps tutorial goes into great detail about Modern Date Picker Control in Power Apps, including all of its key properties and how to use it in a simple application.

Additionally, we will learn how to make the Canvas app’s Power Apps Modern Controls available.

Also, Read: Power Apps Modern Information Button Control [Complete Guide]

Power Apps Modern Date Picker Control

Microsoft Power Apps provides a new Power Apps Modern Date picker control that the user can select to enter a date. The Power Apps modern date picker control can be used by a user to display the date and time inside the Power Apps App.

Refer to the screenshot below that how the Power Apps Modern Date picker control looks like.

Power Apps Modern Date picker control

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

Check out: Power Apps Modern Button Control [Complete Guide]

Power Apps Modern Date Picker Control Properties

The table below represents all the key properties of a Power Apps Modern Date picker control:

PropertyDescription
RequiredThe date picker field can be made mandatory in a context.
Display modeThere are three display modes:
1. DisplayMode.Edit – The user can enter the date
2. DisplayMode.View – Users only can be allowed to display date
3. DisplayMode.Disabled – The control is greyed out with disabled mode
Accessible labelLabel for screen readers.
ContentLanguageIndicates the audience’s language (for example, “en-US”).
OnChangeActions that will be carried out when the Date Picker’s Value property is modified.
ValueBefore the user interacts with the control, its initial value is displayed. The current value of the Date Picker can also be obtained using this as an output property.
PositionX – Distance between the control’s left side and the screen’s left edge.
Y – Distance between the top of the control and the top edge of the screen.
SizeWidth – The distance between the control’s left and right sides.
Height – Distance between the control’s top and bottom.
VisibleSpecifies whether to display or hide the Modern Date picker control.
Power Apps Modern Date Picker Control Properties

How to Add Power Apps Modern Date Picker Control

Here, we’ll see how to add a Modern Date Picker Control in the Power Apps Canvas app.

The “Try out the modern controls” option must first be enabled on the Power Apps Canvas app’s Settings page.

You won’t be able to see the Modern controls in Power Apps if you don’t enable this option. Enable Power Apps Modern Controls by following these steps:

  • Sign in to Power Apps with your valid Microsoft credentials.
  • Create a New Blank Canvas app (Apps -> + New App -> Canvas).
Add Modern Date picker in Power Apps
  • Provide a unique name for the app (Power Apps Modern Date Picker Control) -> Choose the Format as Tablet -> Click on Create.
How to Add Power Apps Modern Date Picker Control
  • On the Power Apps Screen, Click on ellipses (…) from the top -> Settings -> Select Upcoming features -> Preview -> Scroll down and Enable Try out the modern controls as shown below.
  • Save and Publish the canvas app once.
Power Apps Modern Date picker
  • Expand the + Insert tab (from the top) -> go to the Modern tab -> Select the Date picker as below.
  • The Modern Date picker control’s default name, DatePickerCanvas1, will appear on the screen when it has been inserted. It can be renamed to suit your needs.

This is how to add Power Apps Modern Date Picker Control.

Also, have a look: Power Apps Modern Tab List Control [Everything in Detail]

How to Use Power Apps Modern Date Picker Control

We will go over how to use the Power Apps Modern Date Picker control in the below example.

  • The screenshot below represents a Power Apps Modern Date picker control and a Text label control.
  • When a user will select a date from the Modern Date picker (suppose 6/30/2023), then the text label will show the date with the below format as: “Friday, June 30, 2023“.
  • To work around this, select the Text label control and apply the below code on its Text property as:
Text = Text(
    DateValue(DatePickerCanvas1.Value),
    DateTimeFormat.LongDate
)

Where,

DatePickerCanvas1 = Modern Date picker control name

  • Save, Publish, and Preview the app. When you select any specific date from the modern date picker control, then the label will display the date value in long date format.

This is how to use Power Apps Modern Date Picker Control.

Moreover, you may like some more Power Apps tutorials:

This Power Apps tutorial covered the Modern Date Picker Control in great detail, including its important properties and an easy example of how to use it in Power Apps.

Additionally, we learned how to enable the Power Apps Modern Controls in the Canvas app.