---
title: "Introducing Xamarin.Forms Time Picker"
published_at: "2020-01-06T12:00:54+00:00"
modified_at: "2025-03-20T09:21:45+00:00"
url: "https://www.syncfusion.com/blogs/post/introducing-xamarin-forms-time-picker"
excerpt: "Time Picker is a new component introduced to Syncfusion’s Xamarin.Forms components in Essential Studio® 2019 Volume 4. Time Picker is a fully customizable component used in scheduling, to-do, and reminder applications. It that provides provides a common UI for all..."
taxonomy_category:
  - "Desktop"
  - "Xamarin"
taxonomy_post_tag:
  - "TimePicker"
  - "Xamarin"
  - "Xamarin.Forms"
---

# Introducing Xamarin.Forms Time Picker

[Paul Anderson](https://www.syncfusion.com/blogs/author/paulanderson)

![Introducing Xamarin Forms Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Introducing-Xamarin-Forms-Time-Picker.png)


[Time Picker](https://www.syncfusion.com/xamarin-ui-controls/xamarin-timepicker)
 is a new component introduced to Syncfusion’s Xamarin.Forms components in [Essential Studio® 2019 Volume 4](https://www.syncfusion.com/forums/150001/essential-studio-2019-volume-4-release-v17-4-0-39-is-available-for-download)
. Time Picker is a fully customizable component used in scheduling, to-do, and reminder applications. It that provides provides a common UI for all platforms in a simple, yet attractive UI to give your application a smooth, touch-friendly experience.

In this article, I will walk you through the features available in the new Time Picker component.

## Formatting the picker

The Xamarin.Forms Time Picker shows the selectable time values in four predefined time formats. The Time Picker also provides support for formatting the text of the column and the header. The following code example and screenshot illustrate the “hh_mm_tt” time format.

```
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimePickerSample"
             xmlns:timepicker="clr-namespace:Syncfusion.XForms.Pickers;assembly=Syncfusion.SfPicker.XForms"
             x:Class="TimePickerSample.MainPage">
    <ContentPage.Content>
        <Grid>
            <timepicker:SfTimePicker PickerMode="Dialog"
                                     Format="hh_mm_tt"
                                     ShowFooter="True"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>
```

![Formatting Xamarin.Forms Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Formatting-Xamarin.Forms-Time-Picker.png)

*Formatting Xamarin.Forms Time Picker*

## Dialog and standalone

A compact view of elements on the screen is one of the most important aspects of an application. Time Picker comes with standalone and dialog modes that make the app look more impressive in the UI.

```
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimePickerSample"
             xmlns:timepicker ="clr-namespace:Syncfusion.XForms.Pickers;assembly=Syncfusion.SfPicker.XForms"
             x:Class="TimePickerSample.MainPage">
    <Grid>
        <timepicker:SfTimePicker x:Name="timePicker"
                                 PickerMode="Dialog" .../>
        <Button Clicked="PickerButton_Clicked" .../>
    </Grid>
</ContentPage >
```

```
public partial class MainPage
{
    public MainPage()
    { 
        InitializeComponent();
    }
    private void PickerButton_Clicked(object sender,          
                                       System.EventArgs e)
    {
        timePicker.IsOpen = true;
    }
}
```

![Xamarin.Forms Time Picker Dialog View](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Xamarin.Forms-Time-Picker-Dialog-View.gif)

*Xamarin.Forms Time Picker Dialog View*

## Time values with intervals

Time values can be populated with intervals in Time Picker for minutes, hours, and seconds, individually.

```
<timepicker:SfTimePicker PickerMode="Dialog"
                         HourInterval="2"
                         MinuteInterval="2"                                       
                         SecondInterval="2" .../>
```

![Intervals in Xamarin.Forms Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Intervals-in-Xamarin.Forms-Time-Picker.png)

*Intervals in Xamarin.Forms Time Picker*

## Customization

You can customize the colors and fonts of the headers, column headers, footer, and time values. The following code example shows how the selected and unselected values are customized along with fonts.

```
<timepicker:SfTimePicker PickerMode="Dialog"
                         HeaderText="SELECT A TIME"
                         HeaderBackgroundColor="#238F94"
                         HeaderTextColor="#FFFFFF"
                         OKButtonTextColor="#238F94"
                         CancelButtonTextColor="#238F94"
                         UnselectedItemTextColor="#238F94"
                      ColumnHeaderBackgroundColor="#DADDDE"
                         SelectedItemTextColor="#238F94"
                         ShowFooter="True"/>
```

![Customizing Xamarin.Forms Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Customizing-Xamarin.Forms-Time-Picker.png)

*Customizing Xamarin.Forms Time Picker*

## Creating a Xamarin.Forms application containing the Time Picker

This section explains the step-by-step procedure for implementing the Time Picker control in a Xamarin.Forms application using Visual Studio:

1. Create a blank Xamarin.Forms application.
2. In the application, reference the [Xamarin.SfPicker](https://www.nuget.org/packages/Syncfusion.Xamarin.SfPicker/) NuGet package from [nuget.org](https://www.nuget.org/) . To learn more about SfTimePicker, refer to the [Adding SfTimePicker reference](https://help.syncfusion.com/xamarin/timepicker/gettingstarted#adding-sftimepicker-reference) documentation.
3. When deploying the application in UWP and iOS, follow the steps provided in the [Launching the application on each platform with Time Picker](https://help.syncfusion.com/xamarin/timepicker/gettingstarted#initialize-timepicker-on-each-platform) documentation.
4. Import the Time Picker namespace in your page and initialize SfTimePicker as demonstrated in the following code sample.

```
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimePickerSample"
             xmlns:timepicker="clr-namespace:Syncfusion.XForms.Pickers;assembly=Syncfusion.SfPicker.XForms"
             x:Class="TimePickerSample.MainPage">
    <ContentPage.Content>
        <Grid>
            <timepicker:SfTimePicker x:Name="timePicker"
                                 PickerMode="Dialog"
                                 PickerWidth="300"
                                 ShowFooter="True"/>
            <Button Text="Open time Picker" 
                    x:Name="pickerButton"
                    Clicked="PickerButton_Clicked"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    HeightRequest="50" 
                    WidthRequest="200"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>
```

```
using Xamarin.Forms;

namespace TimePickerSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void PickerButton_Clicked(object sender, System.EventArgs e)
        {
            timePicker.IsOpen = true;
        }
    }
}
```

![Creating a Xamarin.Forms Application Containing Time Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2020/01/Creating-a-Xamarin.Forms-Application-Containing-Time-Picker.png)

*Creating a Xamarin.Forms Application Containing Time Picker*

You can download a basic sample from the [Getting Started](https://help.syncfusion.com/xamarin/timepicker/gettingstarted)
 section of our Time Picker control documentation.

## Conclusion

In this blog post, we walked through our new [Xamarin.Forms Time Picker](https://www.syncfusion.com/xamarin-ui-controls/xamarin-timepicker)
 component and its features. Try this control with our [2019 Volume 4 release](https://www.syncfusion.com/forums/150001/essential-studio-2019-volume-4-release-v17-4-0-39-is-available-for-download)
. To learn more about this component, refer to our [UG documentation](https://help.syncfusion.com/xamarin/timepicker/overview)
. You can drop your comments below if you need any clarifications about this component.

Try our Time Picker component with this sample project available on [GitHub](https://github.com/syncfusion/xamarin-demos/tree/master/Forms/TimePicker)
.

If you need support for specific features in this component or have any questions, contact us through our [support forum](https://www.syncfusion.com/forums)
, [Direct-Trac](https://www.syncfusion.com/support/directtrac/)
, or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms)
. We are waiting to hear your feedback about this new component!