Power Apps Date Time Picker: Add Hour and Minute to a Date Picker and Save It

You need people to book a meeting time in your app, so you add a Date picker and look for the time part. There isn’t one. The date picker only stores a date, and the hour has to come from somewhere else.

In this tutorial, we’ll build a Power Apps date time picker from a Date picker and two dropdowns, combine them into one value, save it to a SharePoint date and time column and read it back. We’ll also cover the Format property, the modern control and why SharePoint shows a different hour.

Quick answer: Power Apps has no built-in time picker. Add a Date picker plus Hour and Minute dropdowns, then join them with DateAdd(DateAdd(dpMeetDate.SelectedDate, Value(ddHour.Selected.Value), TimeUnit.Hours), Value(ddMinute.Selected.Value), TimeUnit.Minutes) and Patch that value into the column.

What You Need Before You Start

We kept the setup small. Everything below runs on a standard Power Apps license, and every result in the screenshots comes from the same demo app we use across our Power Apps tutorials.

• A SharePoint list with a Date and Time column. Ours is Service Requests on the SPGuides site, with 620 sample requests and a MeetingStart column (date and time format).
• Permission to edit items in that list, because the Save button writes to it.
• A canvas app connected to the list. If you don’t have one yet, Step 1 builds it.

Step 1: Build the Demo App and Connect the List

Here’s the list we’ll write to. Each row is one request, and MeetingStart is the column the picker fills in.

Sign in to make.powerapps.com and select Start with design on the Home page.

Choose Create from blank. That gives you an empty canvas app, which is an app where you place every control yourself.

Pick the Tablet layout and give the app a name. A wide screen leaves room for the date, hour and minute boxes in one row.

Open Data on the left, select Add data, search for SharePoint and pick the SharePoint connector. A data source is any list or table the app reads from or writes to.

Paste your site URL and select Connect.

Check Service Requests and select Connect again. The list now shows under Data.

Three Studio moves come up in every step below. Select a control on the canvas or in the Tree view, pick a property in the dropdown to the left of the fx formula bar, then type the formula.

Press F5 or the Play button (top right) to run the app, or hold Alt and click a control in the editor. Ctrl+S saves.

Step 2: Add the Classic Date Picker

Open Insert and search for Date picker. You’ll get two results: the modern one under Input and the older one under Classic. We used Classic > Date picker because its Format property takes the same codes as the Text function.

Rename it dpMeetDate in the Tree view and set DefaultDate so the demo always opens on the same day:

Date(2026, 11, 4)

Run the app and select the calendar icon. The pop-up shows the day header and the month grid. Pick a day and select Ok; Cancel keeps the old date.

Note: dpMeetDate.SelectedDate holds a date at midnight. That’s why we add the hours and minutes next.

Need to block past dates? Per Microsoft’s docs, the modern Date picker disables every day before its StartDate property, while the classic one only limits years with StartYear and EndYear. Setting IsEditable to false makes people use the calendar instead of typing.

Step 3: Add Hour and Minute Dropdowns

Insert two Classic dropdowns and name them ddHour and ddMinute. If dropdowns are new to you, our Power Apps dropdown control guide covers the basics. Select ddHour, pick Items and paste this:

ForAll(Sequence(24, 0), Text(Value, "00"))

Sequence(24, 0) makes the numbers 0 to 23, and Text(Value, “00”) pads them, so the list reads 00, 01 … 23 on a 24-hour clock. Set Default to "10".

For ddMinute, set Items to quarter hours and Default to "30". Most booking screens don’t need single minutes. To pull the default from a list column instead, see how we set a dropdown default value from SharePoint.

["00", "15", "30", "45"]

Step 4: Combine the Date and Time with DateAdd

Add a Text label named lblDtPicked, pick its Text property and paste the formula below. The inner DateAdd adds the hours to the date, and the outer one adds the minutes. The Power Apps DateAdd function post covers every TimeUnit.

"Picked: " & Text(
    DateAdd(
        DateAdd(
            dpMeetDate.SelectedDate,
            Value(ddHour.Selected.Value),
            TimeUnit.Hours
        ),
        Value(ddMinute.Selected.Value),
        TimeUnit.Minutes
    ),
    "dddd, mmmm d, yyyy hh:mm AM/PM"
)

The dropdowns hold text such as “10”, so Value() turns each one into the number DateAdd expects. With November 4, 2026, hour 10 and minute 30, the label reads Picked: Wednesday, November 4, 2026 10:30 AM.

Step 5: Save the Date and Time to SharePoint with Patch

Insert a Button, name it btnSaveMeeting and set its OnSelect to this. Patch updates one item without a form; we target request ID 10. The Power Apps Patch function guide has the other ways to call it.

Patch(
    'Service Requests',
    LookUp('Service Requests', ID = 10),
    {
        MeetingStart: DateAdd(
            DateAdd(
                dpMeetDate.SelectedDate,
                Value(ddHour.Selected.Value),
                TimeUnit.Hours
            ),
            Value(ddMinute.Selected.Value),
            TimeUnit.Minutes
        )
    }
);
Notify("MeetingStart saved", NotificationType.Success)

The Notify line shows a green banner when the save works. Our Power Apps Notify function post lists the other message types. To prove the value landed, we added a label that reads the item back:

"Saved in SharePoint (ID 10): " &
Text(LookUp('Service Requests', ID = 10).MeetingStart, "mm/dd/yyyy hh:mm AM/PM")

Run the app and select Save to request ID 10. The label shows Saved in SharePoint (ID 10): 11/04/2026 10:30 AM, the same time we picked.

Step 6: Change the Date Picker Format

The Format property controls how the box shows the date. Select the date picker, pick Format in the property dropdown and type a pattern in quotes. We set three pickers to the same day with three formats.

"yyyy-mm-dd"

DateTimeFormat.LongDate showed Wednesday, November 4, 2026, "yyyy-mm-dd" showed 2026-11-04 and "mm/dd/yyyy" showed 11/04/2026. Format only changes the display; SelectedDate stays a date. For tables, see how to change the date format in a data table.

Date and Time Format Cheat Sheet

Every row below is a result from our app for November 4, 2026 at 10:30 AM.

Where	Format	Result
Text()	“dddd, mmmm d, yyyy hh:mm AM/PM”	Wednesday, November 4, 2026 10:30 AM
Text()	“mm/dd/yyyy hh:mm AM/PM”	11/04/2026 10:30 AM
Date picker Format	DateTimeFormat.LongDate	Wednesday, November 4, 2026
Date picker Format	“yyyy-mm-dd”	2026-11-04
Date picker Format	“mm/dd/yyyy”	11/04/2026

How Do You Show Now() as “mm/dd/yyyy hh:mm AM/PM”?

Use the same pattern we used for the saved label, with Now() as the value. Write AM/PM in capitals (or a/p): those are the 12-hour markers the Text function documents. Without them, hh shows a 24-hour clock.

Text(Now(), "mm/dd/yyyy hh:mm AM/PM")

Now() returns the device’s local time, so two users in different states see different hours. Our Now, Today and IsToday guide explains when to use Today() instead.

Why SharePoint Shows a Different Hour (UTC)

SharePoint stores date and time columns in UTC (Coordinated Universal Time) and Power Apps converts them to the user’s local time. That’s why our 10:30 AM round-tripped cleanly: the same device wrote and read it.

It changes when your users sit in different time zones. The same meeting is 5:00 PM UTC, 1:00 PM Eastern and 10:00 AM Pacific. Our Power Apps time zone tutorial builds this screen.

These are the label formulas. TimeZoneOffset returns the minutes between local time and UTC, and 240 minutes is the Eastern daylight offset.

// UTC
Text(DateAdd(ThisItem.MeetingStart, TimeZoneOffset(ThisItem.MeetingStart), TimeUnit.Minutes), "mm/dd/yyyy hh:mm AM/PM")
// Eastern daylight time (UTC-4 = 240 minutes)
Text(DateAdd(ThisItem.MeetingStart, TimeZoneOffset(ThisItem.MeetingStart) - 240, TimeUnit.Minutes), "hh:mm AM/PM")

Common Mistakes to Avoid

• mm in the wrong place. mm means minutes only right after h or hh. Anywhere else, Text returns the month.
• Skipping Value(). Dropdown items are text, so wrap ddHour and ddMinute in Value() before DateAdd.
• Patching only SelectedDate. That saves midnight. Patch the combined DateAdd value instead.
• Setting DateTimeZone to UTC by accident. The classic picker then displays the UTC date, which can be a day off late in the evening.
• Lowercase am/pm. Use AM/PM or a/p, the forms the docs list.

Does Power Apps Have a Built-in Time Picker?

No. Neither the classic nor the modern Date picker has a time part, and Insert offers no time control. When you add a date and time column to an edit form, Studio builds the same thing we did: a date picker plus hour and minute dropdowns.

If you’d rather keep that form, see how to submit a Power Apps form to SharePoint.

Next Steps

With MeetingStart saved, the next job is usually a schedule view. Our guide to filter a Power Apps gallery by date shows how to list only today’s or this week’s meetings.

We’d keep these open while you build out the scheduling screens:

• How to Calculate Days Between Dates in Power Apps?
• Power Apps DateValue Function: Convert Text to a Date (With Examples)
• How to Get the Dates for the Current Week in Power Apps
• How to Filter Power Apps Line Chart Based On Date Range?

Frequently Asked Questions