How to use date time picker in PowerApps

Lots of people ask, how to use date time picker in PowerApps? In this tutorial, we will check PowerApps date time picker.

In this particular PowerApps example, we will see how to add a date time picker in PowerApps canvas app.

Also, We will see how to set Date as system date or default date including the default time in Power Apps form, and how to display a Date picker field (including Time) in a Tablet layout in PowerApps.

Also, We will cover all the below-related topics on the PowerApps Date Time Picker:

• PowerApps Date Time format
• PowerApps Date Time Picker Format
• PowerApps Date Time now
• PowerApps Date Time Zone
• PowerApps Date Time Value
• PowerApps Date Time format.utc
• PowerApps Date Time Functions
• Custom Date Picker in PowerApps
• Date Picker Validation in PowerApps
• Date Picker in gallery PowerApps
• Date Picker Language PowerApps
• Date Picker Color PowerApps
• Date Picker Range PowerApps
• Clear Date in DatePicker PowerApps
• PowerApps Date Picker month only
• PowerApps Date Picker Disable Past Days
• PowerApps Date Picker Default Date
• PowerApps Date Picker with Time
• PowerApps Date Picker Component
• PowerApps Time Picker am/pm
• PowerApps Dropdown Time Picker

Date time picker in PowerApps

If you want to display date and time inside your PowerApps App, then you can use the PowerApps date time picker.

I have a SharePoint Online List named “Access Registers“. This list has some columns with different data types, that include a Date field (Date picker data type) including the Time.

The below screen represents my SharePoint list which has these below columns including a Date picker field.

To use this Date field in the Powerapps, follow these below steps:

• Open Powerapps in a Browser and Sign in with your Microsoft credentials.
• Go to Apps (from left navigation) -> Click on + New app (from top of the page) -> Select Canvas -> Choose Phone or Tablet layout under the Blank app section. Then, a canvas app will appear with a new Blank screen.
• Connect the Data Source as SharePoint. Go to the View tab (from top of the page) -> Data sources -> Search SharePoint under the Connectors section -> Add a new or an existing connection -> Choose your SharePoint Site -> Select the SharePoint List -> hit the Connect button.

If you are new to Power Apps check how to create PowerApps for SharePoint List.

• Now to add all the fields from SharePoint List, add an Edit Form (Insert -> Forms -> Edit)
• From the Edit form Properties pane, select the Data source as SharePoint and add the required fields (including Date) using the Edit fields option.
• In the below screenshot, you can see my Powerapps form with Date and Time Picker field as:

As I have chosen the app layout as Phone, So the above form is appearing like a Phone view. Similarly, we will see how the Date picker is working in a Tablet layout.

Read Power Apps Export Import Control

PowerApps Date Picker Control

PowerApps Date Picker control is a type of control where the user can select to specify a particular date (with a correct format).

PowerApps Date Picker Properties

Below represents some of the important key properties of the PowerApps Date Picker control.

• SelectedDate = It defines the date currently selected in a date control. The date specifies in the local time.
• DefaultDate = It specifies the initial vaue of a date control unless the user changes it.
• Language = It determines the language that is used to format dates, including names of months. If the property is not specified, then the user’s device setting determines the language. It supports the values include “EN-us” and “FR“.
• Format = This specifies the text format in which the control shows the date and the user specifies the date. Based upon the Language property of this control, you can set this property to ShortDate (default) or LongDate to format dates.
  • You can set this property to an expression, such as yyyy/mm/dd if you want the same format regarding the language.
  • For example, suppose the control displays 11/30/2020, if the user taps the last day of 2020, the Format property is set to ShortDate, and the Language property is set to en-us.
  • Suppose the control shows dimanche 30 novembre 2020, if the user taps the last day of 2020, the Format property is set to LongDate, and the Language property is set to fr-fr.

• BorderColor = It defines the color of a control’s border.
• BorderStyle = It specifies whether a control’s border is Solid, Dashed, Dotted, or None.
• Color = It defines the color of text in a control.
• DateTimeZone = It specifies whether to display the date in UTC or the user’s Local time.
• DisplayMode = It defines whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
• DisabledBorderColor = It provides the color of a control’s border if the control’s DisplayMode property is set to Disabled.
• FocusedBorderColor = It specifies the color of a control’s border when the control is focused.
• FocusedBorderThickness = It defines the thickness of a control’s border when the control is focused.
• IconFill = It provides the foreground color of the date picker icon.
• IconBackground = It provides the background color of the date picker icon.
• InputTextPlaceholder = It defines the instructional text that appears if no dates are entered.
• IsEditable = It defines whether the Date Picker text can be edited. If false, the date can only be changed by using the calendar.
• OnSelect = When the user taps or clicks a control, the action will perform.
• OnChange = When the user changes the value of a control, the action will perform.

NOTE:

Do you know the difference between OnChange and OnSelect property? The OnSelect and OnChange trigger on the same user action if the user’s click causes the change. In this case, OnSelect triggers before OnChange.

• Reset = It defines whether the Date Picker control should be reset to the DefaultDate value.
• Size = It defines the font size of the text that appears on a control.
• StartOfWeek = It represents the day of the week to display in the first-day column of the date-picker control.
• StartYear = It represents the earliest year to which the user can set the value of a date-picker control.
• Visible = It defines whether a control appears or is hidden.
• Width = It specifies the distance between a control’s left and right edges.

Read Power Apps Button Control

PowerApps Date Picker Examples

Let us take a simple example to understand better.

• On the PowerApps screen, Insert a Date Picker control (Go to Insert tab -> Input -> select Date picker)
• Whenever you will add a date picker to the app, always the Default date of the control contains the Today’s date. As you can see in the below screen, the DefaultDate property is having with Today( ) function.
• Now rename the Date picker control to Expected.

• Next, add a Label control and apply the below code on its Text property as:

Text = DateDiff(
    Today(),
    Expected.SelectedDate
) & " days expected!"

Where,

1. Expected = Date picker control name
2. “days expected!” = This is the string that will display in the label control

• Save and Preview the app. Choose a date from the Date picker control (Expected) and then click on OK.
• Once you will click on OK, then the Label control shows the number of days between today and the date that you choose in the date picker. As today’s date is 14, and when I have selected the date as 21, then the label diplays the total days in between of them.

Read Power Apps Display SharePoint List Items

PowerApps Date Time format

Here we will learn all the details about PowerApps Date Time format like DateValue, TimeValue, and DateTimeValue functions.

• The DateValue function helps to convert a date string (example – “15/02/2020”) to a date/time value.
• The TimeValue function helps to convert a time string (example – “10:20 AM”) to a date/time value.
• The DateTimeValue function helps to convert a date and time string (example – “February 15, 2020 10:20 AM”) to a date/time value.

NOTE:

The DateValue, TimeValue, and DateTimeValue functions by default use the language from the current user’s settings. You can override it to ensure that strings are interpreted properly. For example, “10/1/1920” is interpreted as October 1st in “en” and as January 10th in “fr”.

• There are some different formats of Dates. Such as:
  • MM/DD/YYYY or MM-DD-YYYY
  • DD/MM/YYYY or DD-MM-YYYY
  • YYYY/MM/DD or YYYY-MM-DD
  • MM/DD/YY or MM-DD-YY
  • DD/MM/YY or DD-MM-YY
  • DD Mon YYYY
  • Month DD, YYYY

Syntaxes:

DateValue( String [, Language ])
DateTimeValue( String [, Language ])
TimeValue( String [, Language ])

Where,

1. String = This is required. It defines a text string that contains a date, time, or combination date and time value.
2. Language = This is an optional. It defines a language string, such as would be returned by the first two characters from the Language function. If not provided, the language of the current user’s settings is used.

PowerApps DateValue Examples

Here we will see how to work with the DateValue function in PowerApps.

Example – 1:

• In this scenario, there will be a Text input control and a Label control. When a user will enter a date in the text box (suppose 12/15/2020), then the label will show the date with the below format as: “Tuesday, December 15, 2020“.

• To achieve this, select the Label control and apply the below code on its Text property as:

Text = Text(
    DateValue(txtStartDate.Text),
    DateTimeFormat.LongDate
)

Where,

txtStartDate = Text input control name

Here the device set to en locale shows the label as Tuesday, December 15, 2020.

Example – 2:

• In this scenario, We will convert a date from a string in the French locale and display the output as a long date. Here the months and days of the month are interpreted differently from English.
• Select the Label control and set its Text property to the below code:

Text = Text(
    DateValue(
        txtStartDate.Text,
        "fr"
    ),
    DateTimeFormat.LongDate
)

Here the device set to en locale shows the label as Friday, March 12, 2021.

Example – 3:

• In this scenario, I would like to calculate the difference between the two days.
• Select the Label and set its Text property to the below formula:

Text = DateDiff(
    DateValue(txtStartDate.Text),
    Today()
)

Where,

1. DateDiff = This PowerApps DateDiff function helps to display the difference in months, quarters, or years.
2. txtStartDate = Text input control name

• Now save and preview the app. Enter a date in the text box, then you can see the difference day between Today’s date (as today is 9/14/2021) and the specified date as 11 as shown in the above screenshot.

Read PowerApps Dropdown Gallery + Examples

PowerApps DateTimeValue Examples

Here we will see how to work with the DateTimeValue function in PowerApps.

Example – 1:

• In the below scenario, the user will enter the date as “05/10/2021 3:40:23.567 PM” in the text box and the label will display the result as “Monday, May 10, 2021 3:40:23 PM” as shown below.
• Here we will convert both a date and time string in the current locale.

• To workaround with this, apply the below code on Label’s Text property:

Text = Text(
    DateTimeValue(txtDate.Text),
    DateTimeFormat.LongDateTime
)

Where,

txtDate = Text input control name where the user will enter the date

• The device set to en locale shows the label as Monday, May 10, 2021 3:40:23 PM.
• The below code helps to convert both a date and time string in the French locale. Month and day of the month are interpreted differently.

Text = Text(
    DateTimeValue(
        txtDate.Text,
        "fr"
    ),
    DateTimeFormat.LongDateTime
)

Example – 2:

• In this example, We will convert both a date and time string in the user’s locale, and the result will show with a fractional second. Refer to the below screenshot.

• Select the Label control and set its Text property to the below code:

Text = Text(
    DateTimeValue(txtDate.Text),
    "dddd, mmmm dd, yyyy hh:mm:ss.fff AM/PM"
)

• Alternatively, here you can define hh:mm:ss.f or hh:mm:ss.ff to round the time to the nearest 10th or 100th of a second.

The device set to en locale shows the label as Monday, May 10, 2021 03:40:23.567 PM.

Read Power Apps Dropdown Control – How to use

PowerApps TimeValue Examples

In this example, We will see an example of the PowerApps TimeValue function.

• Insert a Text input control and rename it to txtCompletedAt. Add a Label control and apply the below code on its Text property:

Text = If(
    TimeValue(txtCompletedAt.Text) < TimeValue("7:00:00.000 PM"),
    "Successfully made it!",
    "Its too late!"
)

• If you enter 6:59:59.999 PM in the txtCompletedAt control, the label shows “Successfully made it!“
• If you type 8:00:00.000 PM in the txtCompletedAt control, the label shows “Its too late!“

To learn more details about PowerApps Show text, dates, and times, you can refer to the below MSDN tutorial:

• PowerApps show text, dates, and times

PowerApps Date Time Picker Format

In this topic, We will learn how to work with Date Time Picker Format in PowerApps.

• In this scenario, I would like to format the date in the datepicker to view as dd/mm/yyyy. Currently the date is displaying as mm/dd/yyyy.
• For example, I would like 09/15/2021 to view as 15/09/2021 as like the below screenshot.

• To workaround with this, We will use the Format property of the PowerApps Date picker control. Select the date picker and set its Format property as:

Format = "dd/mm/yyyy"

Apart from that, also you can provide any date format like mm/dd/yyyy, yyyy/mm/dd etc as per your need.

This is how we can use Date Time Picker Format in PowerApps.

Read PowerApps Filter SharePoint List (21 Examples)

PowerApps Date Time now

• PowerApps Now() function helps to return the current date and time as a date/time value.
• PowerApps Today function helps to return the current date as a date/time value. Today has the same value throughout a day, from midnight today to midnight tomorrow.
• PowerApps IsToday function helps to test whether a date/time value is between midnight today and midnight tomorrow. This function returns a Boolean (true or false) value.
• All these above functions work with the local time of the current user.

Syntaxes:

Now()
Today()
IsToday( DateTime )

Where,

DateTime = This is required. Provide the date/time value to test.

Examples:

The below table represents all the examples of Date Time in PowerApps. In this section, the current time is 5:35 PM on March 15, 2021, and the language is en-us.

Formula/Syntax	Description	Output
Text( Now(), “mm/dd/yyyy hh:mm:ss” )	It helps to retrieve the current date and time and displays it as a string.	“03/15/2021 05:35:00”
Text( Today(), “mm/dd/yyyy hh:mm:ss” )	It helps to retrieve the current date only, leaving the time portion as midnight, and displays it as a string.	“03/15/2021 00:00:00”
IsToday( Now() )	It helps to test whether the current date and time is between midnight today and midnight tomorrow.	true
IsToday( Today() )	It helps to test whether the current date is between midnight today and midnight tomorrow.	true
Text( DateAdd( Now(), 12 ), “mm/dd/yyyy hh:mm:ss” )	It retrieves the current date and time, adds 12 days to the result, and displays it as a string.	“03/27/2021 05:35:00”
Text( DateAdd( Today(), 12 ), “mm/dd/yyyy hh:mm:ss” )	It retrieves the current date, adds 12 days to the result, and displays it as a string.	“03/27/2021 00:00:00”
IsToday( DateAdd( Now(), 12 ) )	It tests whether the current date and time, plus 12 days, is between midnight today and midnight tomorrow.	false
IsToday( DateAdd( Today(), 12 ) )	It tests whether the current date, plus 12 days, is between midnight today and midnight tomorrow.	false

PowerApps Date Time now Example

Do you want to display the current Date value and the time value within the PowerApps DatePicker control? Follow the below processes to do so.

• Before going to this, I would like to share one thing. If you want to display the current date value and time value within the Datepicker control, then currently there is no such way where you can achieve your needs in PowerApps.
• As of now, within PowerApps, the DatePicker control is used to show the Date value rather than a Date Time value.
• To achieve our needs, there is an alternate solution that we can do easily. Here what we will do is, We will take two PowerApps Dropdown controls i.e. one is for Hours value and other one is for Minutes value. It looks like the below figure (that contains today’s Date, current Minute and Second).

• To achieve this requirement, you need to apply the below formulas on below properties:

1. Select the Date picker control and set its DefaultDate property as:

DefaultDate = Now()

2. Select the Hour Dropdown control and apply the below formula on its Items property as:

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"
]

3. Next, set the Default property of the Hour Dropdown control to the following:

Default = Text(
    Hour(Now()),
    "[$-en-US]00"
)

4. Now select the Minute Dropdown control and apply the below formula on its Items property as:

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"]

5. Next, set the Default property of the Minute Dropdown control to the following:

Default = Text(
    Minute(Now()),
    "[$-en-US]00"
)

• Once all the steps done, just Save, Publish, and Close the app. When you will reopen the app again, you can see the date picker will show the today’s date. Also, the HOUR and MINUTE dropdown will display the current time.

Read Power Apps List Box Control – Complete tutorial

PowerApps Date Time Zone

• While you are working with the PowerApps Dates, you should handle of few Date Time Zone settings. Because it is also a necessary part of the Date Picker control.
• So to convert the Date Time Zone in PowerApps, the Date Picker control is having a property called Date Time Zone.
• Under this property, there are two options available as “Local” and “UTC“. Here the Date and Time returns respectively depending upon the option you select in Date Time Zone.

• Before developing any app, you have to ensure whether the user is using Local or UTC Date Time Zone depending upon the connector that the user is dealing with.

PowerApps Date Time Value

In this topic, We will see how to work with PowerApps Date Time Value.

• Suppose there is a Label control and a Date Picker control in the app. The Label control is having a Date that you have specified.
• For this example, I have taken Today’s date in the label (Label’s Text property should be Now()). Next, I would like to display the label date in the Date picker control.
• To do this, Select the Date picker control and set the below code on its DefaultDate property as:

DefaultDate = DateTimeValue(
    lblDate.Text,
    "en-US"
)

Where,

lblDate = Label control name

So by using this way, we can achieve our needs.

Read PowerApps Container Control

PowerApps Date Time format.utc

Do you want to convert the PowerApps Date Time zone from local to UTC?

• Sometimes what happens is, the user want to convert the current time in UTC, but the Now() function returns the value in local time.
• Normally UTC is the Time zone that currently being used in United States.
• To convert the Date Time zone from local to UTC, Insert a Label control and apply the below formula on its Text property as:

Text = Text(Now(), DateTimeFormat.UTC)

• When you will save and preview the app, you can see the current UTC Date and Time in the label control as shown above screenshot.

PowerApps Date Time Validation

Do you want to validate a Date Time in Power Apps? If so, then there is already an article that I have written on my site, please check out the detailed tutorial through the below link:

• PowerApps Date Time Validation in PowerApps

PowerApps Date Time Functions

• PowerApps Date Function helps to convert individual Year, Month, and Day values to a Date/Time value. Here the time portion is midnight.
• When the Year is in between 0 and 1899, then the function adds that value to 1900 to calculate the year. 80 becomes 1980.
• When the Month is less than 1 or more than 12, then the output subtracts or adds that many months from the beginning of the specified year.
• When the Day is greater than the number of days in the specified month, then the function adds that many days to the first day of the month and returns the corresponding date from a subsequent month.
• When the Day is less than 1, then the function subtracts that many days, plus 1, from the first day of the specified month.
• PowerApps Time Function helps to convert individual Hour, Minute, and Second values to a Date/Time value.

Syntaxes:

PowerApps Date Function Syntax:

Date( Year, Month, Day )

Where,

1. Year = This is required. Numbers greater than 1899 are interpreted as absolute (1980 is interpreted as 1980); numbers that range from 0 to 1899 are interpreted as relative to 1900. (For example, 80 is interpreted as 1980.)
2. Month = This is also required. Define a number that ranges from 1 to 12.
3. Day = This is required. Specify a number that ranges from 1 to 31.

PowerApps Time Function Syntax:

Time( Hour, Minute, Second )

Where,

1. Hour = This is required. Provide a number that ranges from 0 (12:00 AM) to 23 (11:00 PM).
2. Minute = This is also required. Specify a number that ranges from 0 to 59.
3. Second = This is required. Define a number that ranges from 0 to 59.

PowerApps Date Time Function Example

PowerApps Date Function Example

Hereby taking a simple example, We will see how to work with the Date function in PowerApps.

• On the screen, Insert three Text input controls i.e. one is for Year (named txtYear), one is for Month (named txtMonth), and another one is for Day (named txtDay).
• The user will enter a selected Year, Month, and a Day, then the Date function will return the full date with this format as: “MM/DD/YYYY“.
• For example, I have entered the year as 2021, Month as 4 and the Day as 13, so the label returned as 4/13/2021 as like the below screenshot.

• To achieve this, add a Label control and apply the below code on its Text property:

Text = Date(
    Value(txtYear.Text),
    Value(txtMonth.Text),
    Value(txtDay.Text)
)

PowerApps Time Function Example

Hereby taking a simple example, We will see how to work with the Time function in PowerApps.

• On the screen, Insert three Text input controls i.e. one is for Hour (named txtHour), one is for Minute (named txtMinute), and another one is for Second (named txtSecond).
• The user will enter an Hour, Minute, and Second, then the Time function will return the full time with this format as: “H/M/S a/p“.
• For example, I have entered the Hour as 05, Minute as 35, and the Second as 55, so the label returned as 05:35:55 p as like the below screenshot.

• To achieve this, add a Label control and apply the below code on its Text property:

Text = Text(
    Time(
        Value(txtHour.Text),
        Value(txtMinute.Text),
        Value(txtSecond.Text)
    ),
    "hh:mm:ss p"
)

Where,

a/p = It defines whether the specified time is AM or PM

This is how we can use the Date Time Functions in PowerApps.

Custom Date Picker in PowerApps

To create a custom calendar in PowerApps, you can refer to the below link:

Create PowerApps Custom Date Picker

Date Picker in gallery PowerApps

Do you want to filter the gallery using a Date Picker control in PowerApps? Check out the below simple scenario that how you can achieve it so easily.

• In this scenario, I have a Date Picker control and a Gallery control in the app. A user will select a date from the date picker control. At the same time the gallery will filter the data and display the filtered record based upon the selected date.
• For example, in the below screen, I have selected a date as 7/10/2021 and the gallery displays all the filtered records based on the user selected date.

• There is a SharePoint List named Customer Care Report Details. This list has various columns with different data types. Apart from that, it has a Date column called Report Date.
• Now I would like to filter the record that depends upon the Report Date and the filtered record will display in a gallery control.

• To workaround with this, set the below formula on Gallery’s Items property:

Items = Filter(
    'Customer Care Report Details',
    Text(
        'Report Date',
        ShortDate
    ) = Text(
        DatePicker4.SelectedDate,
        ShortDate
    )
)

Refer to the below screenshot.

• Save and Preview the app. Select a specific date from the date picker control (where the date should match with the SharePoint list date). Then you can see the date filtered records in the gallery control.

To learn more details about the PowerApps Date filter, you can refer to the below tutorial:

• Create PowerApps Date filter

Date Picker Language PowerApps

Do you want to change the language of the PowerApps Date Picker control?

• In the PowerApps Date Picker, there is such a property called Language. By using this language property, you can change the date to any language as like English(UK), English(US), etc.
• For example, In the below screen, as I have specified the Date Language as “en-GB”, So the date is showing us as like below.

• Similarly, you can provide the language property to “en”, “en-US” etc as per your desire.
• You must ensure to provide the Date language within an inverted comma (” “), otherwise, it won’t work properly.

This is how we can change the Language in PowerApps Date Picker control.

Read Power Apps Image Control – How to use

Date Picker Color PowerApps

Do you want to change the color of the Date picker or calendar and its icon background in PowerApps? If so, there are two different approaches that you can use for it.

Approach – 1:

• There is a property of the Date picker control called IconBackground. This property helps to provide the background color of the date picker icon.
• Select the Date picker and set the color to its IconBackground as:

IconBackground = LightCoral

Where,

LightCoral = Provide the color that you want to display in the date picker icon. Also, you can specify your desired color code

Approach – 2:

There is another way where you can modify the color of the date picker control. The second approach that you can try is by changing the Theme of your app the date picker control color also changes.

This is how we can achieve our needs.

Date Picker Range PowerApps

What is a PowerApps Date Picker Range and how we can use it? All the related details you can get from the below link:

• PowerApps Date Picker Range

Date Time picker missing Time in Power Apps Tablet Layout

Like the Phone layout, in the same way, you can add the Date Picker field in the Power apps form. But the layout should be a Tablet layout.

In the Tablet layout, When you will add the Date field in the form, sometimes you can not able to see any Time field including the Date Picker. Here, the Time will be missing at the time of adding the Date Picker.

Also even if you will delete the Date picker field and again will add, then also the time will not appear with the Date.

To insert Time (HH:MM) with Date Picker in the Powerapps Tablet layout, you need to do these below steps:

Step-1:

First of all, Add two drop down control (Insert -> Input -> Dropdown) besides the Date picker field. One drop-down control is for displaying the Hour and the other one is for displaying the Minutes.

Step-2:

Select the Hour drop-down control and apply this below formula on its Items property as:

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

As Hour represents 24 hours, So I have applied from “00” to “23”.

Step-3:

Similarly, Select the Minutes drop-down control and apply this below formula on its Items property as:

["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"]

As Minutes represents 60 seconds, So I have applied from “00” to “59”.

Step-4:

Together with the DatePicker control, within one DataCard, then use the following formula to combine the time value with the date value under the Update property of the DataCard control:

DateValue1.SelectedDate + Time(Value(HourDropdown.Selected.Value), Value(MinutesDropdown.Selected.Value), 0)

You can refer the below screenshot:

Here,

• DataCardValue2 = Date Picker field name
• HourValue1 = Hour Dropdown control name
• MinuteValue1 = Minute Dropdown control name

Read Power Apps GroupBy Function example

PowerApps default time to now

Now, we will see how to set a default date time to the PowerApps date time picker.

Suppose, every time of the page loads, you want to set the current date as default date with default time in the date picker. So you need to do these below things:

At first, Create a Context variable with the current date on the OnVisible property of the Powerapps screen. Below represents the formula:

OnVisible = UpdateContext({currentDate: Today()})

Here,

currentDate = Context variable

Now use that context variable as the DefaultDate property of the date picker control. Just select the date picker field and apply the below formula on its DefaultDate property as:

DefaultDate = currentDate

Set Default Hour

To set the Default Hour in Powerapps, just select the Hour dropdown control and apply the below formula on its Default property as:

Default = Text(Hour(Now()),"[$-en-US]00")

Set Default Minutes

To set the Default Minutes in Powerapps, just select the Minutes dropdown control and apply the below formula on its Default property as:

Default = Text(Minute(Now()),"[$-en-US]00")

Clear Date in DatePicker PowerApps

• Suppose you want to clear or reset the date in the date picker control in PowerApps? To achieve this, what and how the user can achieve it?
• Here I will show you the three different approaches that you can work around with. Follow the below scenarios.

Example – 1:

In this scenario, We will see how to clear a date picker in an easy way.

• I have a date picker control in the app. The date picker should show default to the date of today.
  In the app, I have created a clear icon (instead of an icon, you can take a button also).
• Next, I would like to make the date picker empty when I click on this clear icon. The date picker should be blank. Go through the below formulas to do this.
• Here, once you make the default Today, it cannot be Blank at the same time. So select the Cancel icon and apply the below formula on its OnSelect property as:

OnSelect = UpdateContext ({MakeBlank: !MakeBlank})

Where,

MakeBlank = Context variable name

• Next, Select the Date picker control and set the below code on its DefaultDate property:

DefaultDate = If(
    MakeBlank,
    Today(),
    Blank ()
)

• Now Save and Preview the app. When you will click on the cancel icon, then it will change from Today to blank value and its vice versa.

Example – 2:

• This is another approach that you can try. Select the Cancel icon or Cancel button and apply the below code on its OnSelect property as:

OnSelect = Set(
    showBlankDate,
    true
)

Where,

showBlankDate = Set a Variable name. You can specify any name

• Next, apply the below formula to Date picker’s DefaultDate property as:

DefaultDate = If(
    showBlankDate,
    Blank(),
    Today()
)

Refer to the below screenshot.

• Now save and publish the app. Select a date from the date picker control that you want. Once you will tap on the cancel icon, you can see the date picker will get blank or as like “12/31/2001“.

Example – 3:

• In this scenario, We will see how to clear or reset the date picker control inside the PowerApps form. Here I would like to have a button that resets the datepicker to a blank value.
• First of all, you have to add a Reset button inside the Date Picker Data Card. If you want to reset only the datepicker control instead of the whole form, then you can try these below steps.

Step – 1:

• Unlock the Date Picker DateCard in the edit form, and insert a Button control called Reset in it.

Step – 2:

• Select the Reset button and apply the below code on its OnSelect property as:

OnSelect = UpdateContext({resetdate: true});
Reset(DataCardValue7)

Where,

1. resetdate = Specify the context variable name
2. DataCardValue7 = Date picker control data card value

Step – 3:

• Next, select the Date picker control and apply the below formula on its DefaultDate property as:

DefaultDate = If(
    resetdate,
    Blank(),
    Parent.Default
)

Step – 4:

• At last, set the below code on the Edit form’s OnSuccess, OnReset, and OnFailure property to causes the default value to be displayed the next time the form is opened.

OnSuccess, OnReset, OnFailure = UpdateContext({resetdate: false})

• Save, Publish, and Close the app. Reopen the app again. Select a date from the date picker control. Once you will click the Reset button, the DatePicker would return blank value.

This is how we can clear or reset the Date in DatePicker in PowerApps.

Check out, Power Apps Data Table

PowerApps Date Picker month only

In this topic, We will see how to work with Date Picker month only in Power Apps.

• In this scenario what I would like to do is, I want to see only the Month and Year in the PowerApps Date Picker control.
• Also, we have to remove the date field from the date picker control. Instead of the full date, it will show only month and year in the date picker control.
• To display Month value and Year value within the Date Picker control, we need to work with these below formulas.
• Select the Date picker control in your app and you can try these below codes on its Format property as:

Format = "mmmm, yyyy"
OR
Format = "mm/yyyy"
OR
Format = "mmm, yyyy
"

You can try any formula from the above code section.

• Once you will save and preview the app, you can see the month and year format in the date picker control according to the specified formula.

PowerApps Date Picker Disable Past Days

• Suppose you want to disable the past days of the Date picker control in PowerApps, then you can follow the below formulas with different kinds of scenarios.
• PowerApps disable date picker past days means, a user can select only the current date or any future date. A user can not able to select any past days from the date picker control.

Example – 1:

• In this scenario, When a user will select any past dates, then it will restrict and return to the default date (i.e. Today). The user can select any future dates that he/she wants.
• To achieve this, Select the Date picker control and apply the below formula on its OnSelect property as:

OnSelect = If (
    DatePicker8.SelectedDate < Today(),
    Reset(DatePicker8)
)

Where,

DatePicker8 = Date picker control name

Example – 2:

• This is the another way where you can not able to select the past dates in the PowerApps Date picker control. You can only choose the future dates that you may require.
• Also, if you will select any past dates from the date picker, then a notify will appear for the user that this is an invalid entry.
• As today is 9/21/2021 and when I have selected the date as 9/15/2021, so the notification occured that you can see in the below screenshot.

• To workaround with this, you need to insert a Date Picker control and a Label control (that will help you to show the notiication error).
• Follow the below formulas that you can use in both the controls (Date picker and Label).

1. At first, select the Date Picker control and apply the below code on its BorderColor property as:

BorderColor = If(
    DatePicker9.SelectedDate < Today(),
    Color.Red,
    RGBA(
        101,
        128,
        187,
        1
    )
)

Where,

DatePicker9 = Date picker control name

2. Select the Label control and apply the below formulas on its following properties:

Label1.Text: "Past Date Can't be Selected"
Label1.Color: Color.Red
Label1.Visible: DatePicker9.SelectedDate < Today()

3. Now save and preview the app. Select any past date from the date picker control. Now, you can see the invalid warning notification in the label control under the date picker control.

Example – 3:

• Also, there is another simple approach that you can try to get it. Here, if you will select any past date from the date picker, then the error notification will appear at the top of the page as shown below.

• To workaround with this, select the Date picker control and set the below code on its OnSelect property as:

OnSelect = If(
    DatePicker10.SelectedDate < Today(),
    Notify(
        "Selected date cannot be before Today",
        Error
    )
)

Where,

1. DatePicker10 = Date picker control name
2. “Selected date cannot be before Today” = This is the error message that will appear when I will select the past dates from the date picker control

• Save and Preview the app. Select any specific past date from the date picker control and click on OK. When you will click on ok, then you can see an error notification will display at the top of the page.

Also, there is another way that you can go through from this below PowerApps forum link:

• PowerApps Disable past dates start time selection

This is how we can work with PowerApps Date Picker Disable Past Days.

PowerApps Time Picker am/pm

In this topic, We will see how to work with PowerApps Time Picker am/pm. Refer to the below steps to do so:

Step – 1:

• At first, in the app, I have an Edit form where all the fields are retrieved from the SharePoint List called Customer Care Report Details. There is a Date picker field named Report Date.
• Now in the Report Date Data card, insert two Dropdown controls where one is for displaying Hour and another one is for Minute values i.e. AM/PM.
• Select the AMPM dropdown control and apply the below code on its Items property as:

Items = ["AM","PM"]

• And then set the below formula to the Default property of the AMPM dropdown as:

Default = If(Hour(Parent.Default) < 12, "AM", "PM")

Refer to the below screenshot.

Step – 2:

• Now select the Hour dropdown control and apply the below code on its Items property as:

Items = ["12","01","02","03","04","05","06","07","08","09","10","11"]

• And then set the below formula to the Default property of the Hour dropdown as:

Default = Text(
    If(
        Mod(
            Hour(Parent.Default),
            12
        ) = 0,
        12,
        Mod(
            Hour(Parent.Default),
            12
        )
    ),
    "[$-en-US]00"
)

Refer to the below screenshot.

Step – 3:

At last, modify the Update property of the Date data card (Report Date data card) as:

Update = DataCardValue15.SelectedDate + Time(
    If(
        ddAMPM.Selected.Value = "PM",
        12,
        0
    ) + Mod(
        Value(ddHour.Selected.Value),
        12
    ),
    0,
    0
)

Where,

1. DataCardValue15 = Date picker control name
2. ddAMPM = AMPM dropdown control name
3. ddHour = Hour dropdown control name

You must ensure the Date Time Zone property of DateValue should be Local.

This is how we can work with PowerApps Time Picker am/pm.

PowerApps Dropdown Time Picker

To know all the details about PowerApps Dropdown control and PowerApps Dropdown Time Picker, check out the below link:

PowerApps Dropdown Time Picker

Also, you may like these below Power Apps Tutorials:

• How to use Power Apps Search Function
• How to use PowerApps Timer Control
• How to use PowerApps notify function
• The function Search has some invalid arguments in PowerApps
• Create People Picker in Power Apps with Combo Box
• How to Create PowerApps GridView
• Various PowerApps Validation Examples
• How to format number as currency in PowerApps
• PowerApps charts (Column, Line and Pie Chart)
• PowerApps toggle control + How to use with example
• PowerApps Email Attachment Control – How to Use

In this Power Apps Tutorial, we discussed DateTime picker PowerApps.

• PowerApps date time picker
• How to use date time picker in PowerApps in PowerApps App
• Set default date-time to now in PowerApps date time picker
• How to display a date picker field in tablet layout including time
• PowerApps Date Time format
• PowerApps Date Time Picker Format
• PowerApps Date Time now
• PowerApps Date Time Zone
• PowerApps Date Time Value
• PowerApps Date Time format.utc
• PowerApps Date Time Functions
• Custom Date Picker in PowerApps
• Date Picker Validation in PowerApps
• Date Picker in gallery PowerApps
• Date Picker Language PowerApps
• Date Picker Color PowerApps
• Date Picker Range PowerApps
• Clear Date in DatePicker PowerApps
• PowerApps Date Picker month only
• PowerApps Date Picker Disable Past Days
• PowerApps Date Picker Default Date
• PowerApps Date Picker with Time
• PowerApps Date Picker Component
• PowerApps Time Picker am/pm
• PowerApps Dropdown Time Picker