How to use Power Apps date picker

In this Power Apps tutorial, we will see, how to use the Power Apps date picker with a few examples.

Recently, while working on Power Apps forms, I got a requirement to display a doctor’s appointment date. For this, I have used the date picker in the Power Apps.

I will show you how to use Power Apps date picker control with the below things:

• What is a date picker control in Power Apps?
• Power Apps date picker example
• What are the properties of Power Apps date picker?
• Is it possible to customize the Power Apps date picker?
• How to change the color in the Power Apps date picker?
• How to customize the icon background color in Power Apps date picker?
• How to set the date as today in the Power Apps date picker?
• How to format the date in the date picker control in Power Apps?
• Display the date in yyyy/mm/dd format within the Power Apps date picker.
• How to display dates in different languages within the Power Apps date picker?
• How to create a Power Apps date picker with time?
• Working with Power Apps date picker datetimezone
• How to use Power Apps date picker starts on Monday
• Use Power Apps date picker start date
• How to work with Power Apps date picker only month and year
• What is Power Apps date picker iseditable
• What is Power Apps date picker to text
• How to get Power Apps date picker year only

Before working with the Power Apps date picker control, we need to prepare a canvas app. So that, we can build the date picker control within the Canvas app to implement all the above scenarios, To prepare the canvas app, follow these steps:

• Sign in to the Power Apps with your Office365 tenant address.
• Go to create > Blank canvas app > Create.
• Give a name to the canvas app.
• Choose a format for the app (i.e., Tablet or Mobile).
• Create.

It will open with a blank default screen within the Power Apps canvas app.

What is a date picker control in Power Apps?

In Power Apps, there is an input control named “Date Picker” that allows the user to select a specific date.

Using a Date Picker control instead of a Text input control can help ensure that the user enters a date in the correct format.

We can find that control under the Insert tab > Input > Date Picker > Select. It will create a data picker control within the Power Apps screen that appears with the current date as default.

This is how to add a Power Apps date picker control.

Read How to use Power Apps Check Box Control

Power Apps date picker example

Once the date picker control has been added to the screen, we will demonstrate how to use it in Power Apps with an example.

Let’s take a simple scenario to work with the date picker control. The following steps are:

• On the Power Apps screen, add a date picker control.
• Rename the control as “SubmissionDate”.

• Next, add a Text label control to the screen and place it near the date picker control.
• Insert the below expression on the Text property of the label control.

Text = DateDiff(Today(), SubmissionDate.SelectedDate) & " days to go for task Submission!"

Let’s preview the app. By default, as the current date is displayed on the date picker control, the label control is displaying 0 days.

If we pick another date from the date picker control, then the label control will appear like the below:

This is how to use the Power Apps date picker control with an example.

Power Apps date picker properties

There are different types of properties that come under the Power Apps date picker’s control. Here, we will describe some properties and their uses.

• DefaultDate: Unless the user changes it, the default or initial value of a date control. (i.e., The current date)
• SelectedDate: The date that is currently chosen in a date control. This date is listed in local time.
• Format: The text format in which the control displays the date and the user enters it. To format dates based on the Language property of this control, set this property to ShortDate (the default) or LongDate. If you want the same format regardless of language, you can set this property to an expression, such as yyyy/mm/dd.
• Language: Defines the language used to format dates, including month names. If this property is not specified, the language is determined by the user’s device settings. “EN-us” and “FR” are supported values.
• BorderColor: The border color of a control.
• BorderStyle: Whether the border of a control is Solid, Dashed, Dotted, or None.
• Color: The text color in a control.
• DateTimeZone: Whether the date should be displayed in UTC or the user’s local time.
• DisplayMode: Whether the control accepts user input (Edit), displays data only (View), or is disabled (Disabled).
• EndYear: The most recent year in which a date-picker control’s value can be set by the user.
• Fill: A control’s background color.
• Font: The name of the font family in which text appears.
• IconFill: The color of the date picker icon’s foreground.
• IconBackground: The color of the date picker icon’s background.
• InputTextPlaceholder: If no dates are entered, this message appears.
• IsEditable: If the Date Picker text can be changed. If false, the only way to change the date is to use the calendar.
• OnSelect: When a user taps or clicks a control, actions are taken.
• OnChange: When a user changes the value of a control, actions must be taken.
• Reset: Whether or not to reset the Date Picker control to the DefaultDate value.
• StartOfWeek: The day of the week to display in the date-picker control’s first-day column.
• StartYear: The earliest year to which a date-picker control’s value can be set.
• Visible: Whether the control is visible or hidden.

Read Power Apps Checkbox control within Gallery

Is it possible to customize the Power Apps date picker?

Do you want to customize the Power Apps date picker or popup size within the control? Unfortunately, Microsoft doesn’t allow changing the size of the date picker control. We recommend you follow the provided link to get ideas about ‘Allow changing the size of the default Datepicker Calendar element’

Power Apps date picker color

In this section, we will discuss how to set color within the Power Apps date picker control. In the Power Apps date picker control, there is a property named “Color” that allows us to change the text color and background color of the control.

Example-1: Power Apps date picker text color

Here, we will see how to set a different color to the Power Apps date picker text. To check this, we will use the above example of the Power Apps date picker control.

• Select the control.
• Navigate to the right side Properties panel.
• Find the properties of Color.

• Click on the A symbol and select a color from the color picker.
• It allows selecting a standard color (that will directly apply to the control) or a custom (You can custom color as per your choice).

This is how to change the text color in the Power Apps date picker control.

Example-2: Power Apps date picker background color

Similarly, if you want to change the background color of the Power Apps date picker control, then click on the Paint icon under the Color property. Select a color from the color picker. We can see the selected color will be applied to the control’s background.

This is how to change the background color within the Power Apps date picker control.

Read How To Set Default Value in Power Apps List Box Control

Example-3: Power Apps date picker border-color

The Power Apps date picker control allows us to change the control’s border color as per the requirement. For this, there is a property named BorderColor. You can find this property under the properties panel.

We can choose a color for the control’s border from this color picker, or you can enter the color code in RGBA format on the BorderColor property. We can also give the BorderColor property a color name to set the control’s border color.

This is how to give a border color to the Power Apps date picker control.

Example-4: Power Apps date picker color theme

There is another way to change the entire color of the date picker control. When we change the theme of the app, the color of the date picker control will change.

In the Power Apps screen, we can find several themes under the Themes section.

Let’s select a theme (suppose Red) and apply that theme to the app. We can see the date picker will change like below:

This is how to change a Power Apps date picker’s color based on the theme.

Read Power Apps Listbox items from SharePoint list

Power Apps date picker icon background color

In the Power Apps date picker control, there is a particular property named IconBackground that allows changing the color of the icon’s background.

Let’s change the background of the control’s icon to DarkGreen color.

IconBackground = DarkGreen

This is how to change the icon’s background color within the Power Apps date picker control.

Power Apps date picker set today

Usually, when we add a Power Apps date picker control to the Power Apps screen, it displays the current date as the default date.

There is a ‘DefaultDate’ property that is used to display the initial date within the Power Apps date picker control.

In certain cases, if you are unable to see the current date in the Power Apps date picker control, then set the below expressions in the DefaultDate property.

DefaultDate = Today()

Or,

DefaultDate = Now()

Both the Today() and Now() functions work the same. The Now function returns the current date and time but the Today() returns the current date and time as a date/time value.

This is how to set today’s date in the Power Apps date picker control.

Read How to use Power Apps List box control?

Power Apps date picker format

In this section, we will see how to format a date within the Power Apps date picker control. There is a property named Format under the Date Picker Control, that allows displaying the date in various formats within the control such as LongDate, LongDateTime, LongDateTime24, ShortDate, ShortDateTime, ShortDateTime24, SortTime, UTC, etc.

By default, the date appears in ShortDate format within the Power Apps date picker control. (i.e., 11/3/2022).

Let’s format the date to display in LongDate format. For this, select the Power Apps Date Picker control and set the Format property as below:

Format = DateTimeFormat.LongDate

You can find all the above formats within the control’s Format property below:

This is how to format a date within the Power Apps date picker control.

Display the date in yyyy/mm/dd format within the Power Apps date picker.

In the preceding example, we saw how to format a date in the Power Apps date picker control. In this example, we’ll look at how to format the selected date to yyyy/mm/dd.

That is, instead of a sort date, we want to format the selected date to yyyy/mm/dd format when the user selects any required date.

To work with this requirement, the following steps are:

• On the Power Apps screen, add a date picker control to select the date.
• Next, add a Text label control to the screen.
• Insert the below expression into the label’s Text property to format the selected date to the desired format.

Text = Text(DatePicker1.SelectedDate, "yyyy/mm/dd/")

Where DatePicker1 is the name of the Power Apps date picker control name.

Similarly, we can format the selected date to “yy/mm/dd”, “yyyy/mmm/dd”, “yyyy/mmmm/dddd”, etc formats.

This is how to format a date to “yyyy/mm/dd” from the Power Apps date picker control.

Read Power Apps combo box default value

How to display dates in different languages within the Power Apps date picker?

Here we will see how to represent a date in a different language within the Power Apps date picker control.

There is a specific property named “Language” that is used to format the language as per the user’s requirement, including the month’s names. It allows inserting the language format in that specified property such as “EN-us”, “FR”, “da”, “es”, “it”, “ko-KR”, etc.

Example-1: Power Apps date picker using Language property

Let’s take an example to see how to change the Power Apps date picker language. The following steps are:

• Add a date picker control to the Power Apps screen. It will display the date and the months in the default format. (i.e, 11/3/2022)

• To change the language, select the date picker format and insert a language format to the Language property. Suppose “De”.

Language = "De"

• We can see it will format the names inside the date picker control like the below:

This is how to format the language within the Power Apps date picker control.

Example-2: Power Apps date picker format Language using Text

In this section, we will see how to format the Power Apps date picker language using the Text().

The Syntax for this function is:

Text(Value, "format_text", language)

Where,

1. Value – The selected date from the date picker control.
2. “format_text” – The specified format to convert the selected date (i.e., “yyyy/mmm/dd“, “dd/mm/yy“, etc)
3. language – The selected language code to format the text value i.e., selected date.

Let’s take a simple example to see how to format the language using the text() and the following steps are:

• On the Power Apps screen, add a Date Picker control.
• Again, add a Text Label control to the screen.
• Insert the below expression on the label’s Text property.

Text = Text(DatePicker1.SelectedDate, "yyyy/mm/dd", "en-GB")

Where DatePicker1 is tha name of the Power Apps Date picker control.

In the above example, we have selected a date from the date picker control, and it will be formatted to the desired language.

This is how to format the language of a selected date from the Power Apps date picker control.

Read Power Apps Combo box with SharePoint list

How to create a Power Apps date picker with time?

While working with the Power Apps date picker control, we have seen that there is no option to choose a specific time as per the user’s requirement. It only allows the user to select the desired date.

But in this section, we will see how to build a date picker with the time within the Power Apps.

Case 1: Create a Date Time picker using the Collection

To fulfill this requirement, the following steps must be taken:

• On the Power Apps screen, add a date picker control.
• Then add two combo box controls to the screen. From them, one is for the Hour and the other one is for the Minute. Set the Toggle Off on the Allow Multiple Selections the for both the Combobox controls.
• Next, on the screen’s OnVisible property, insert the below expression to create collections to hold data for hours and minutes.

OnVisible = 

//Collection for Hour
ForAll(
    Sequence(25,0,1),
    Collect(
        CollHours, 
        {HourText: If(ThisRecord.Value < 10, "0" & ThisRecord.Value, ThisRecord.Value), HourValue: ThisRecord.Value}
        )
    ); 

//Collection for Minute
ForAll(Sequence(61,0,1),
    Collect(CollMinutes, 
             {MinuteText: If(ThisRecord.Value < 10, "0" & ThisRecord.Value, ThisRecord.Value), MinuteValue: ThisRecord.Value}
)
);

where CollHours and CollMinutes are the names of the collections. HourText, HourValue,, and MinuteText, MinuteValue are the name of the collections’ headers respectively.

• Now, select the Hour Combobox and set the properties below:

Items = CollHours
DisplayFields = ["HourText"]
SearchFields = ["HourText"]
DefaultSelectedItems = ["00"]

• select the Minute Combobox and set the properties below:

Items = CollMinutes
DisplayFields = ["MinuteText"]
SearchFields = ["MinuteText"]
DefaultSelectedItems = ["00"]

• Finally, add a ‘text label’ control to the screen and insert the below expression on the Text property to display the selected date and time.

Text = DatePicker1.SelectedDate + Time(Value(Hour_Cmb.Selected.HourText), Value(Minute_Cmb.Selected.MinuteText), 0)

Where DatePicker1 is the name of the Power Apps date picker control. Hour_Cmb and Minute_Cmb are the name of the Power Apps combo box controls.

Let’s preview this app and select the date as well as the time. We can see the date and the time will appear below:

This is how to create a date picker with time in PowerApps.

Read Power Apps combo box filter

Case 2: Create a date-time picker without a collection

There is another way to create a Power Apps date picker with time. The following steps are:

• On the Power Apps screen, add a date picker control.
• Add 2 dropdown controls to store and select the Hours and Minutes respectively.
• Select the first dropdown (which is meant for the Hours) and insert the below values on the dropdown’s Items property.

Items = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]

• Similarly, select another dropdown control and insert the below values within the dropdown’s Items property.

Items = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41"," 42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"]

• Add a label control to the screen and insert the below expression on the label’s Text property.

Text = Appoinment_DatePicker.SelectedDate + Time(Value(Hour_dd.Selected.Value), Value(Minute_dd.Selected.Value), 0)

Where

1. Appoinment_DatePicker: The name of the Power Apps date picker control.
2. Hour_dd and Minute_dd: The name of the Power Apps dropdown controls.

That’s it! Let’s preview the app and select the desired date at a specific time. We can see the value will appear shown as below:

This is how to create a Power Apps date picker with time.

Power Apps date picker DateTimeZone

Here, we will see how to work with the DateTimeZone within the Power Apps date picker control.

Under the Power Apps date time picker, we can find a property called “DateTimeZone” that controls whether the date is displayed in UTC or the user’s local time.

To work with this property within the Power Apps date picker control, the following steps are:

• On the Power Apps screen, add a date picker control.
• Select the control, and click on the DateTime Zone property.
• Insert the below expression on the control’s DateTimeZone property to display the current date based on the Local time zone.

DateTimeZone = DateTimeZone.Local

On the above screen, we can see that the date picker control displays today’s date based on the Local DateTime Zone.

Similarly, we can display today’s date in the UTC date time zone. For this, insert the below expression on the DateTimeZone property.

DateTimeZone = DateTimeZone.UTC

Because the current date in UTC is 11/15/2022, the date picker control displays that date. This is how to work with the datetimezone inside the Power Apps date picker control.

Power Apps date picker starts on Monday

We’ll look at how to create a Power Apps date picker control that starts on Monday. When we work with the Power Apps date picker control, it usually starts on Sunday.

However, for certain requirements, we must set the date picker control to start on Monday.

To fulfill this requirement, insert the below expression on the StartOfWeek property of the Power Apps date picker control.

StartOfWeek = StartOfWeek.Monday

Let’s preview the date picker control, we can see the control starts on Monday shown below:

This is how to set the Power Apps Date picker to start on Monday.

Power Apps date picker set maximum date

Here, we will see how to set a maximum date while working with the Power Apps date picker control.

That is, we will add a condition to the Power Apps date picker control, limiting the user to selecting a maximum date that is comparable to the current date.

To work with this requirement, add a Power Apps date picker control to the screen and insert the below expression on the OnChange property of the DatePicker Control.

OnChange = If(Self.SelectedDate > Today() ,
          Notify( "Start date can't be greater than today", 
                  NotificationType.Error);
          Reset(Self)
)

As per the above expression, it will notify the user on selecting the greater date as well as reset to the current date.

That’s all! Let’s check out the app. Choose a date that is greater than the current date i.e., 11/16/2022. (Ex: 11/25/2022)

This is how to set a maximum date within the Power Apps date picker control.

Power Apps date picker set minimum date

Similarly, here we will see how to set a minimum date while working with the Power Apps date picker control.

That means when the user selects a minimum or sorter date than a specific date, then it will notify the user and also, reset to the current date.

For this, add a Power Apps date picker control to the screen and insert the below formula on the OnChange property of the date picker control.

OnChange = If(Self.SelectedDate < Today() ,
          Notify("The selected date can't be shorter than today", 
                 NotificationType.Error);
          Reset(Self)
)

According to the above expression, the user cannot select a date that is less than the current date.

Ley’s preview the app. Select a date that is less than the current date. We can see it will display an error message as well as reset to the current date.

As we have selected a date i.e., 11/11/2022, instead of the selected date it displays the error message as above.

This is how to work with the minimum date while working with the Power Apps date picker control.

Power Apps date picker iseditable

In Power Apps there is a property named Iseditable under the Power Apps date picker control that allows the user if the Date Picker text can be changed. If false, the only way to change the date is to use the calendar.

Assume we don’t want users to be able to change the date value field at all. Also, if they attempt to do so, the system should immediately force them to select a date/display the date picker.

In such case, we can set the Power Apps date picker control’s Iseditable property to false.

Iseditable = false

This is how to workwith the Power Apps date picker iseditable property.

Conclusion

From this Power Apps Tutorial, we learned all about Power Apps Date Picker control. Also, we covered how to use this control in different scenarios. Such as:

• Power Apps date picker control
• Power Apps date picker example
• Power Apps date picker properties
• Power Apps date picker size
• Power Apps date picker color with various examples
• Power Apps date picker icon background color
• Power Apps date picker set today
• Power Apps date picker format
• Power Apps date picker format yyyy/mm/dd
• Power Apps date picker language
• Power Apps date picker time with different examples
• Power Apps date picker datetimezone
• Power Apps date picker starts on Monday
• Power Apps date picker start date
• Power Apps date picker only month and year
• Power Apps date picker iseditable
• Power Apps date picker to text
• Power Apps date picker year only

You may like the following Power Apps tutorials:

• How to Patch Power Apps Date Picker
• [Solved]Can’t convert this data type. Power Apps can’t convert this Date to a Boolean
• How to Reset Power Apps Date Picker
• How to Reset Power Apps Combo Box
• Power Apps Cascading Dropdown Control
• How to Remove Duplicates in Power Apps Dropdown
• Power Apps Dropdown Control with SharePoint
• Power Apps Gallery Patch