Category / Section
How to add SfDatePicker to Xamarin.Forms DataForm (SfDataForm)
2 mins read
You can add custom date picker using SfDatePicker in Xamarin.Forms DataForm by using Custom editor.
You can create and add custom editor to DataForm by overriding the DataFormEditor class, where custom editor (CustomPickerEditor) is inherited using the DataFormEditor<Button>. Refer to the online user guide documentation for creating new custom editor in DataForm.
namespace DataFormXamarin
{
class CustomPickerEditor : DataFormEditor<Button>
{
public CustomPickerEditor(SfDataForm dataForm) : base(dataForm)
{
}
protected override Button OnCreateEditorView(DataFormItem dataFormItem)
{
return new Button();
}
protected override void OnInitializeView(DataFormItem dataFormItem, Button view)
{
view.BackgroundColor = Color.LightGray;
view.FontSize = 14;
}
protected override void OnCommitValue(Button view)
{
var date = (App.Current.MainPage as MainPage).Picker.Date;
view.Text = date != null ? date.ToString("dd-MM-yyyy") : null;
var dataFormItemView = view.Parent as DataFormItemView;
this.DataForm.ItemManager.SetValue(dataFormItemView.DataFormItem, view.Text);
}
protected override void OnWireEvents(Button view)
{
base.OnWireEvents(view);
view.Clicked += OnButtonClicked;
}
void OnButtonClicked(object sender, EventArgs e)
{
(App.Current.MainPage as MainPage).Picker.IsOpen = true;
}
protected override void OnUnWireEvents(Button view)
{
view.Clicked -= OnButtonClicked;
}
}
}
Refer to the following code example for binding DataObject and register the editor using RegisterEditor as CustomPickerEditor to make data form item as custom editor in DataForm.
namespace DataFormXamarin
{
class DataFormBehavior : Behavior<ContentPage>
{
SfDataForm dataForm;
SfDatePicker datePicker;
public ICommand OkCommand => new Command(OkButton);
protected override void OnAttachedTo(ContentPage bindable)
{
base.OnAttachedTo(bindable);
dataForm = bindable.FindByName<SfDataForm>("dataForm");
datePicker = bindable.FindByName<SfDatePicker>("picker");
dataForm.RegisterEditor("DateEditor", new CustomPickerEditor(dataForm));
dataForm.RegisterEditor("Date", "DateEditor");
datePicker.OkCommand = this.OkCommand;
}
private void OkButton()
{
dataForm.Commit("Date");
}
}
}
You can add picker dialog using SfDatePicker to the Main page.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="0.9*"/>
</Grid.RowDefinitions>
<dataForm:SfDataForm x:Name="dataForm" Grid.Row="1" LayoutOptions="Default" DataObject="{Binding Contacts}"/>
<picker:SfDatePicker x:Name="picker"
BackgroundColor="Silver"
ShowHeader="false"
PickerMode="Dialog"
ShowFooter="true"
PickerWidth="250"
PickerHeight="200">
</picker:SfDatePicker>
</Grid>
