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.
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.
|Article ID:||Published Date:||Last Revised Date:||Platform:||Control:|