Overview
If you want to ensure your users have a pleasant experience with the date picker control in canvas apps, then check out these 10 tips! From improve functionality use to better UI design, they can make all the difference for users in your apps.
YouTube
1. Date Range
Properties StartYear and EndYear allow you to specific the year range permitted in the control. By default the date range is from 1970 to 2050.
In this case you could limit the control to the current year using Year(Today()) function. However, with the Canvas App date picker, you cannot restrict to a specific date range.
*Note* The custom pages date picker does allow a min and max date, so there are differences between the two controls.
2. Default Date
DefaultDate is a perfect starting point to see a default date for your end users. Using simple formulas you can move the date out a day, a week, or even a month out without having users to intervene. Setting a default date can be complex, you can refer to the following tutorial that dives into the various options in depth: https://lowcodego.com/2023/01/27/power-apps-default-dates-by-week-month-quarter-year/
3. Manually Modify Date
When clicking on the control, the date selection screen will popup by default. Sometimes this is not ideal behavior if you are entering in data such as Birthdate that requires users to backtrack many years in the control. IsEditable is set to false by default that dictates this behavior. If you switch it to true, users will be able to enter a date directly into the control.
4. OnChange Event to Restrict Date Selection
OnChange property is a great way to restrict date selection such as not allow weekends. After the selection is made, conditions can be checked to see if the date is permitted. If not, the date field can be reset.
Formula below restricts weekends from being selected:
If(Weekday(Self.SelectedDate) = 1 || Weekday(Self.SelectedDate) = 7,
Notify("Cannot select weekend.", NotificationType.Error, 5000);
Reset(Self)
)
5. Date Format/Language
Defining the Language for the date control will override device behaviors that may change how the date is displayed. By default, this is left blank, so dates could be displayed in different formats.
6. Width
When setting the width of a date control, try to use a date that will use the most real estate to ensure enough space has been allocated. If using a date such as 3/1/2023 and your format the width to fit that date, other dates will not fully show when selected
Example of 3/1/2023 displaying
Example of same date control cutting off 12/28/2023
7. Backdrop
Since the date picker control does not have properties for rounded corners, you can instead use a button as a backdrop and format the border to resemble the aesthetics of other fields.
It’s recommended you udpate the following fields on the button:
- DisplayMode –> DisplayMode.Display
- DisabledFill –> Color.White
- DisabledBorderColor –> Color.{YourChoice}
The date field should have it’s border removed and sized slightly smaller than the button control.
8. Look and Feel
The following properties are a great way to improve the aesthetics:
- IconFill
- IconBackground
9. Tab Index
TabIndex property is usually an after thought when the app is near completion. When users tab through the apps, you can define what order they are tabbed in and whether tabbing should be allowed on the control.
*Note* TabIndex of -1 will remove tabbing from the control.
10. Selected Date
When writing dates to a database or displaying the date selected on the screen, the property to use is SelectedDate ex) date_Due.SelectedDate
