Formatting in UWP TimePicker (SfTimePicker)

18 Feb 20252 minutes to read

The SfTimePicker control allows users to format the display text in various ways.

Using the FormatString

The FormatString property determines the format specifier by which the display text has to be formatted.

The example below shows how to create a time picker with a Long Time pattern.

 
   <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

            <syncfusion:SfTimePicker VerticalAlignment="Center" 

                                   Width="200" Margin="15"

                                   FormatString="HH:mm:ss"/>

   </Grid>
timePicker.FormatString = "HH:mm:ss";
timePicker.FormatString = "HH:mm:ss"

Features_img1

Specifying format for the TimeSelector

The SelectorFormatString property used to specify format for the TimeSelector

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <syncfusion:SfTimePicker HorizontalAlignment="Center" VerticalAlignment="Center" 

                                   Width="200" Margin="15"

                                   SelectorFormatString="HH:mm:ss"/>
</Grid>
timePicker.SelectorFormatString = "HH:mm:ss";
timePicker.SelectorFormatString = "HH:mm:ss"

Features_img2

NOTE

A detailed explanation of standard date time formatting is availablehere. The result string produced by these format specifiers is influenced by the settings in the Regional Options control panel. Computers with different cultures or different date and time settings will generate different result strings.