web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id :
Power Up Program - Build A Canvas App
Answered

Configuring Date Picker in AM/PM Format

(0) ShareShare
ReportReport
Posted on by 63

After writing this article, I discovered a simpler way. In the OnChange property of the drop-down, do the following:
Hour(TimeValue(Self.Selected.Value))
And then use the resulting value in patching.

 
In a PowerApps app, when using a form or the Patch function without a form, you might need to display a Date/Time column's hour in AM/PM format rather than the default 24-hour format.
 

After exploring several options and reading some excellent articles online, I finally came up with a simple solution.
 
For this solution, I am using modern controls.
 
In the PowerApps form, I am using a data card with a Date Picker control. For simplicity, I am naming the controls. Change the settings for each control as listed below.
 

Date Picker:

  • Name: dte_DatePicker

Minutes Drop-down:

  • Name: drp_Minutes

Hours Drop-down:

  • Name: drp_Hours
  • Items: (Below, I am including only the hours that I need. You may add all 24, starting at "00 AM")
    ["06 AM","07 AM","08 AM","09 AM","10 AM","11 AM","12 PM","1 PM","2 PM","3 PM","4 PM","5 PM","6 PM","7 PM","8 PM","9 PM","10 PM"]
     
  • DefaultSelectedItems:
    // This expression checks if the 'Default' property of the parent control is not blank. If it is not blank, it converts the 'Default' value to a formatted time string in "hh:mm AM/PM" format for the "en-US" locale. Otherwise, it returns an empty array.
    
    If(
        !IsBlank(Parent.Default),
        [
            Text(
                DateTimeValue(Parent.Default),
                "hh:mm AM/PM",
                "en-US"
            )
        ],
        []
    )
     
  • OnChange:
    // This expression updates the context variable `loc_AmPm` based on the selected value, converting specific AM/PM time strings into their corresponding 24-hour format representations.
    
    UpdateContext(
        {
            loc_AmPm: Switch(
                Self.Selected.Value,
                "06 AM", "06",
                "07 AM", "07",
                "08 AM", "08",
                "09 AM", "09",
                "10 AM", "10",
                "11 AM", "11",
                "12 PM", "12",
                "1 PM", "13",
                "2 PM", "14",
                "3 PM", "15",
                "4 PM", "16",
                "5 PM", "17",
                "6 PM", "18",
                "7 PM", "19",
                "8 PM", "20",
                "9 PM", "21",
                "10 PM", "22"
            )
        }
    )
     

Data Card:

  • Name: DateTimeDataCard
  • Update:
    // This expression checks if the selected date from the 'dte_DatePicker' control is not blank. If it is not, it creates a new date-time value using the year, month, and day from the selected date, along with the hour value converted from 'loc_AmPm', the minute value from 'drp_Minutes', and the second value from the selected date.
    
    If(
        Not IsBlank(dte_DatePicker.SelectedDate),
        DateTime(
            Year(dte_DatePicker.SelectedDate),
            Month(dte_DatePicker.SelectedDate),
            Day(dte_DatePicker.SelectedDate),
            Value(loc_AmPm),
            Value(drp_Minutes.Selected.Value),
            Second(dte_DatePicker.SelectedDate)
        )
    )
     
Categories:
I have the same question (0)
  • w.p Profile Picture
    6,749 Super User 2025 Season 2 on at
    Configuring Date Picker in AM/PM Format
    This is "Power Up Program - Build A Canvas App" forum, how can I help?

     
  • Verified answer
    SpoTechGeek Profile Picture
    63 on at
    Configuring Date Picker in AM/PM Format
    Hi @w.p
    I wasn't requesting help. Just thought this article would help others. 🙂
  • w.p Profile Picture
    6,749 Super User 2025 Season 2 on at
    Configuring Date Picker in AM/PM Format
    For housekeeping, please mark the post as Answered.

    Users come to the Power Up Program forum when they struggle with the program.

    Thank you for sharing.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Leaderboard > Microsoft Power Up Program Community

#1
Michael E. Gernaey Profile Picture

Michael E. Gernaey 241 Super User 2025 Season 2

#2
mmbr1606 Profile Picture

mmbr1606 120 Super User 2025 Season 2

#3
MS.Ragavendar Profile Picture

MS.Ragavendar 48 Super User 2025 Season 2

Last 30 days Overall leaderboard

Featured topics