How to set Calendar in ComboBox Dropdown
The combo box control has support to show custom view in the drop-down suggestion box using the DropdownHeaderView and DropdownFooterView properties.
Steps to show calendar in the combo box dropdown:
Step 1: Add the SfCombobox control in the content page.
Step 2: Add the SfCalendar control in the DropdownHeaderView or DropdownFooterView property.
Step 3: Customize the drop-down button using the DrodownButtonSetting property.
Step 4: To show the selected date in the combo box textfield, set the selected date to the Text property of the combo box in the Sfcalendar selection changed event.
The following code showsdemonstrates how to show the calendar in the combo box drop-down.
Code:
<StackLayout VerticalOptions="Start" HorizontalOptions="Start" Padding="30"> <combobox:SfComboBox HeightRequest="40" x:Name="sfComboBox" ShowDropDownFooterView="False" ShowDropDownHeaderView="True" TextSize="12" DropDownHeaderViewHeight="300" MaximumDropDownHeight="300" DropDownFooterViewHeight="0" DropDownItemHeight="0"> <combobox:SfComboBox.DropDownHeaderView> <syncfusion:SfCalendar x:Name="calendar" SelectionChanged="calendar_SelectionChanged" HeightRequest="300" /> </combobox:SfComboBox.DropDownHeaderView> <combobox:SfComboBox.DropDownButtonSettings> <combobox:DropDownButtonSettings Image="date.png" /> </combobox:SfComboBox.DropDownButtonSettings> </combobox:SfComboBox> </StackLayout>
C# Code:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
sfComboBox.DataSource = new ObservableCollection<object>() { "i"};
sfComboBox.Text = DateTime.Now.Date.ToString("D");
}
private void calendar_SelectionChanged(object sender, Syncfusion.SfCalendar.XForms.SelectionChangedEventArgs e)
{
sfComboBox.Text = e.DateAdded[0].Date.ToString("D");
}
}
Screenshot:
|
Please download the sample from the following link: Sample
