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.
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:
|Required||The date picker field can be made mandatory in a context.|
|Display mode||There 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 label||Label for screen readers.|
|ContentLanguage||Indicates the audience’s language (for example, “en-US”).|
|OnChange||Actions that will be carried out when the Date Picker’s Value property is modified.|
|Value||Before 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.|
|Position||X – 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.
|Size||Width – The distance between the control’s left and right sides.|
Height – Distance between the control’s top and bottom.
|Visible||Specifies whether to display or hide the Modern Date picker control.|
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).
- Provide a unique name for the app (Power Apps Modern Date Picker Control) -> Choose the Format as Tablet -> Click on Create.
- 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.
- 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 )
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:
- How to use the date time picker in PowerApps [Classic]
- How to Show Hide Power Apps Label Control On Button Click
- How to Filter Power Apps Gallery by Person
- Power Apps Modern Badge Control [Complete Guide]
- Power Apps Modern Progress Bar [Detailed Guide]
- Power Apps Screen Templates [11 Screens With Examples]
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.
Bijay Kumar Sahoo is a highly accomplished professional with over 15 years of experience in the field of SharePoint and related technologies. He has been recognized as a Microsoft MVP (Most Valuable Professional) more than 9 times, starting from April 2014, for his exceptional contributions to the SharePoint community. Bijay is also a prolific author, having written two books on SharePoint – “Microsoft Power Platform – A Deep Dive” and “SharePoint Online Modern Experience Practical Guide“. His deep insights into SharePoint are also shared on his popular YouTube channel EnjoySharePoint where he teaches SharePoint to a global audience (From various countries like the United States of America, Canada, the United Kingdom, Australia, New Zealand, etc). Read more…