How to add custom button to Footer view in Xamarin Forms SfPicker
Using Xamarin.Forms SfPicker, you can create customized Xamarin.Forms SfDatePicker application. By default, the Xamarin.Forms SfPicker has “OK” and “Cancel” buttons in FooterView, and it also has an option for customization. You can add custom buttons in FooterView and get current date from the button click.
The following steps explain how to add custom today button in Xamarin.Forms SfPicker:
Step 1: Create an app using Xamarin.Forms SfPicker with all the required assemblies.
Step 2: Create CustomDatePicker class, which should be inherited from Xamarin.Forms SfPicker, and add the properties needed to display date.
Step 3: Create DatePickerViewModel class and add the properties of CustomDatePicker class into ViewModel collection. Refer to the following code snippet to add custom today button in Xamarin.Forms SfPicker.
ObservableCollection<object> currentDate;
public CurrentDatePicekr()
{
InitializeComponent();
currentDate = new ObservableCollection<object>();
currentDate.Add(CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(DateTime.Now.Date.Month).Substring(0, 3));
if (DateTime.Now.Date.Day < 10)
currentDate.Add("0" + DateTime.Now.Date.Day);
else
currentDate.Add(DateTime.Now.Date.Day.ToString());
currentDate.Add(DateTime.Now.Date.Year.ToString());
}
private void TodayButton_Clicked(object sender, System.EventArgs e)
{
date.SelectedItem = currentDate;
}
Step 4: Initialize the custom Xamarin.Forms CustomDatePicker in XAML page, in which the ViewModel class is set to BindingContext of custom Xamarin.Forms CustomDatePicker.
XAML:
<local:CustomDatePicker.FooterView> <StackLayout Orientation="Horizontal" HorizontalOptions="Center"> <Button Text="Today" Clicked="TodayButton_Clicked" Margin="2" HeightRequest="40" WidthRequest="90"> </Button> <Button Text="Ok" Margin="2" HeightRequest="40" WidthRequest="90" Clicked="OkButton_Clicked"> </Button> <Button Text="Cancell" Margin="2" HeightRequest="40" WidthRequest="90" Clicked="CancelButton_Clicked"> </Button> </StackLayout> </local:CustomDatePicker.FooterView>
Output
You can find the sample in the following link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CurrentDateSfPicker-1859435966.zip
