We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to achieve TimePicker using SfPicker in Xamarin Forms

Platform: Xamarin.Forms |
Control: SfPicker |
Published Date: September 7, 2017 |
Last Revised Date: June 21, 2019

In our Xamarin Forms, SfPicker control has multi column support. Using this we can populate Hour, Minute and Format values providing as a collection to SfPicker control.

We have demonstrated how to create CustomTimePicker using Picker control in the following steps.

Step 1: We have created custom class named as “CustomTimePicker”. This class should inherit from SfPicker control.

C#:

 
public class CustomTimePicker : SfPicker 
{
 
}
 

 

Step 2: After that create four ObservableCollection with object type in CustomTimePicker class.

Collection details:

Time Collection, Minute Collection, Hour Collection and Format Collection.

Time Collection->We have added all the three collections.

Minute Collection -> We have added minutes from 0 to 59.

Hour Collection -> We have added hours from 1 to 12.

Format Collection -> We have added two format AM and PM.

The below code demonstrates Time collection creation.

C#:

 
public class CustomTimePicker: SfPicker
    {
        // Time api is used to modify the Hour collection as per change in Time
        /// <summary>
        /// Time is the acutal DataSource for SfPicker control which will holds the collection of Hour ,Minute and Format
        /// </summary>
        public ObservableCollection<object> Time { get; set; }
 
        //Minute is the collection of minute numbers
 
        public ObservableCollection<object> Minute;
 
        //Hour is the collection of hour numbers
 
        public ObservableCollection<object> Hour;
 
        //Format is the collection of AM and PM
 
        public ObservableCollection<object> Format;
 
        public CustomTimePicker()
        {
            Time = new ObservableCollection<object>();
            Hour = new ObservableCollection<object>();
            Minute = new ObservableCollection<object>();
            Format = new ObservableCollection<object>();
            
            
            PopulateTimeCollection();
            this.ItemsSource = Time;            
        }
 
        private void PopulateTimeCollection()
        {
            //Populate Hour
            for (int i = 1; i <= 12; i++)
            {
                Hour.Add(i.ToString());
            }
 
            //Populate Minute
            for (int j = 0; j < 60; j++)
            {
                if (j < 10)
                {
                    Minute.Add("0" + j);
                }
                else
                    Minute.Add(j.ToString());
            }
 
            //Populate Format
            Format.Add("AM");
            Format.Add("PM");
 
            Time.Add(Hour);
            Time.Add(Minute);
            Time.Add(Format);
        }
    }

 

Step 3: We have defined each column headers “Hour”, “Minute” and “Format” using ColumnHeaderText property of SfPicker control. The below code demonstrates how to define header for each column of SfPicker control.

C#:

public class CustomTimePicker: SfPicker
 {
     
       /// <summary>
       /// Header api is holds the column name for every column in time picker
       /// </summary>  
 
      public ObservableCollection<string> Headers { get; set; }
 
        public CustomTimePicker()
        {
           Headers = new ObservableCollection<string>();
           if (Device.OS == TargetPlatform.Android)
            {
                Headers.Add("HOUR");
                Headers.Add("MINUTE");
                Headers.Add("FORMAT");
            }
            else
            {
                Headers.Add("Hour");
                Headers.Add("Minute");
                Headers.Add("Format");
            }            
            
               // Column header text collection
            this.ColumnHeaderText = Headers;  
     }     
 }

 

Step 4: Finally we have enabled SfPicker header, Column header and footer using ShowHeader , ShowFooter and ShowColumnHeader properties.

C#:

public CustomTimePicker()
        {  
   //Enable Footer of SfPicker
            ShowFooter = true;
 
            //Enable Header of SfPicker
            ShowHeader = true;
 
            //Enable Column Header of SfPicker
            ShowColumnHeader = true;
         
        }

 

Step 5: We have added the CustomTimePicker control in main XAML page. Please refer the below code snippets.

XAML:

 
<ContentPage
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimePickerSample"
             x:Class="TimePickerSample.MainPage"
             xmlns:picker="clr-namespace:Syncfusion.SfPicker.XForms;assembly=Syncfusion.SfPicker.XForms">
    
    <!--Assign the TimePickerViewModel to BindingContext of Page-->
    <ContentPage.BindingContext>
        <local:TimePickerViewModel />
    </ContentPage.BindingContext>
    <Grid>
        <Button
            Clicked="Button_Clicked"
            HeightRequest="30"
            HorizontalOptions="Center"
            Text="Show TimePicker"
            VerticalOptions="Center"
            WidthRequest="200" />
        
        <!--Initialize the CustomTimePicker-->
        <local:CustomTimePicker
            x:Name="date"
            ColumnHeaderHeight="40"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            PickerHeight="400"
            PickerMode="Dialog"
            PickerWidth="300" 
            SelectedItem="{Binding SelectedTime,Mode=TwoWay}"/>
    </Grid>
 
</ContentPage>
 

 

C#:

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

        private void Button_Clicked(object sender, EventArgs e)
        {
            date.IsOpen = !date.IsOpen;
        }
    }
 

 

Please find the below screen shot using the above code

SfPicker control has multi column support.

 

We have attached TimePicker sample for your reference. Please download the sample from the following link.

Sample linkTimePicker

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon