Xamarin Forms date and time picker

Question

I am using Xamarin Forms to make Cross-platform application and I need to create simple view that user can choose date and time, similar to this: View that I want to create that i found here: Picker in Xamarin iOS. Solution for Android is ready, but I need to create solution for iOS in the same application

I can not use standard date picker and another standard time picker separately from Xamarin Forms. I need to create custom solution (one view - simple choose both date and time).

I have tried to create view in Xamarin Forms that consist of 2 lists in horizontal orientation (one for date, one for time) but when I select one position, the list is not scrolling to the middle of view and also there is not auto-selecting middle position element when I scroll the list up or down. I want to create something that works like Xamarin-iOS solution: "Date and time picker" but in Xamarin Forms.

I have tried also to create in Xamarin-iOS part of project "date and time picker". I have main.storyboard and view controller but I dont know how to display view from Xamarin-iOS inside Xamarin Forms and pass selected date and time.

Can you help me, please?

welcome in SO! please read how-to-ask and correct your question — Maciej S.

Lucas Zhang Lucas Zhang · Accepted Answer · 2019-03-15T05:51:02

If you want to implement date-time picker on Xamarin.Forms in iOS platform.You can use CustomRenderer.

in Forms

create a subclass of Picker

public class MyPicker:Picker
{
    public MyPicker()
    {

    }
}

And add it in xaml

<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
    <!-- Place new controls here -->

    <local:MyPicker  WidthRequest="150"  BackgroundColor="AliceBlue"/>

</StackLayout>

in iOS

create the renderer of Picker .And you can set the format of picker as you want.

using System;

using Foundation;
using UIKit;
using ObjCRuntime;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

using xxx;
using xxx.iOS;

[assembly:ExportRenderer(typeof(MyPicker),typeof(MyPickerRenderer))]
namespace xxx.iOS
{
  public class MyPickerRenderer:PickerRenderer
  {

    string SelectedValue;

    public MyPickerRenderer()
    {

    }

    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);

        if(Control!=null)
        {
            SetTimePicker();
        }

    }


    void  SetTimePicker()
    {
        UIDatePicker picker = new UIDatePicker
        {
            Mode = UIDatePickerMode.DateAndTime
        };

        picker.SetDate(NSDate.Now,true);

        picker.AddTarget(this,new Selector("DateChange:"),UIControlEvent.ValueChanged);

        Control.InputView = picker;


        UIToolbar toolbar = (UIToolbar)Control.InputAccessoryView;

        UIBarButtonItem done = new UIBarButtonItem("Done", UIBarButtonItemStyle.Done, (object sender, EventArgs click) =>
        {
            Control.Text = SelectedValue;
            toolbar.RemoveFromSuperview();
            picker.RemoveFromSuperview();
            Control.ResignFirstResponder();
            MessagingCenter.Send<Object, string>(this, "pickerSelected", SelectedValue);



        });

        UIBarButtonItem empty = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace, null);

        toolbar.Items = new UIBarButtonItem[] { empty, done };

    }

    [Export("DateChange:")]
    void DateChange(UIDatePicker picker)
    {
        NSDateFormatter formatter = new NSDateFormatter();

        formatter.DateFormat = "MM-dd HH:mm aa"; //you can set the format as you want

        Control.Text = formatter.ToString(picker.Date);

        SelectedValue= formatter.ToString(picker.Date);

        MessagingCenter.Send<Object, string>(this,"pickerSelected",SelectedValue);
    }
  }
}

And use MessagingCenter to pass the selected date and time.

public MainPage()
{
    InitializeComponent();

    MessagingCenter.Subscribe<Object, string>(this, "pickerSelected", (sender, arg) => {
        Console.WriteLine(arg);
        //arg is the selected date and time
    });

}

I have uploaded the demo on github .You can download it for test.

The effect

Xamarin Forms date and time picker

2 Answers