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

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.



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.



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>();




            this.ItemsSource = Time;





        private void PopulateTimeCollection()


            //Populate Hour

            for (int i = 1; i <= 12; i++)





            //Populate Minute

            for (int j = 0; j < 60; j++)


                if (j < 10)


                    Minute.Add("0" + j);






            //Populate 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.



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



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





Please find the below screen shot using the above codes.







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


Sample link: TimePicker


Article ID: Published Date: Last Revised Date: Platform: Control:
7980 09/07/2017 09/07/2017 Xamarin.Forms SfPicker
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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