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.

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.

This 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.

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

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

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