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

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



Article ID: Published Date: Last Revised Date: Platform: Control:
7951 08/28/2017 01/05/2018 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