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 DatePicker using SfPicker in Xamarin Forms

Platform: Xamarin.Forms |
Control: SfPicker |
Published Date: August 28, 2017 |
Last Revised Date: January 5, 2018

Our Xamarin.Forms Picker control has multi column support. By using this, you can populate date, month, and year values of collection in SfPicker control.

By using Picker control, you can create custom Date Picker.

Step 1: Custom class has been created, and named as “CustomDatePicker”. This class should inherit from SfPicker control.



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

Collection details:

Date Collection, Day Collection, Month Collection, and Year Collection.

Day Collection -> Current month days have been added by using DateTime.DaysInMonth.

Month Collection -> Jan to Dec months have been added.

Year Collection -> 1990 to 2050 years have been added.

Date Collection -> All the three collections have been added.

Date Collection is main collection, which have been assigned it to ItemsSource of Picker Control.

The following code demonstrates Date collection creation.



Step 3: The day value has been updated based on month and year values by using Selection changed event of SfPicker control. Since the days of each month differs, you should handle this collection.



Step 4: Each column headers such as “Day”, “Month”, and “Year” have been defined by using ColumnHeaderText property of SfPicker control. The following code demonstrates how to define header for each column of SfPicker control.



Step 5: Finally, SfPicker header, Column header, and footer have been enabled by using ShowHeader, ShowFooter, and ShowColumnHeader properties.



Step 6: CustomDatePicker control has been added in main XAML page. Please refer the following code snippets.





The output has been illustrated in the following screenshot by using the above codes.



The DatePicker sample has been attached for your reference. Please download the sample from the following link.


Sample link: DatePicker



2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
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