Xamarin.iOS 如何正确显示 UIDatePicker 实现日期选择功能

问题原因 #

1. iOS 14及以上系统对UIDatePicker的默认展示样式做了调整，默认使用UIDatePickerStyle.Automatic，在iPad上会默认渲染为紧凑弹窗样式，不是你需要的滚轮式选择器，需要主动指定样式。
2. 你原代码中datePickerView的frame设置x坐标为负的屏幕宽度，导致控件直接渲染到屏幕可视区域外，无法正常展示。
3. 将UIDatePicker设置为UITextField的InputView时，不需要手动将datePicker添加到当前视图，系统会在TextField成为第一响应者时自动弹出输入视图。

修复方案 #

按以下代码调整即可实现预期的滚轮日期选择效果：

1. 初始化日期选择器

var datePickerView = new UIDatePicker();
// 关键：指定为滚轮样式，适配iOS14及以上系统
if (UIDevice.CurrentDevice.CheckSystemVersion(14, 0))
{
    datePickerView.PreferredDatePickerStyle = UIDatePickerStyle.Wheels;
}
datePickerView.MinimumDate = (NSDate)DateTime.Today.AddDays(-7);
datePickerView.MaximumDate = NSDate.Now;
datePickerView.Mode = UIDatePickerMode.Date;
datePickerView.Locale = NSLocale.FromLocaleIdentifier("en_US");
// 作为InputView使用时无需手动设置frame

2. 绑定到TextField并补充交互逻辑

var t = new UITextField();
t.InputView = datePickerView;
t.Frame = new CGRect(50, 100, 300, 50);
t.Placeholder = "enter date";
t.TextColor = UIColor.Black;
Add(t);

// 监听日期选择变化，同步选中值到文本框
datePickerView.ValueChanged += (sender, e) =>
{
    var selectedDate = (DateTime)datePickerView.Date;
    t.Text = selectedDate.ToString("yyyy-MM-dd");
};

// 添加上方工具栏，方便用户收起选择器
var toolbar = new UIToolbar(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, 44));
toolbar.Items = new UIBarButtonItem[]
{
    new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace),
    new UIBarButtonItem("完成", UIBarButtonItemStyle.Done, (sender, e) =>
    {
        t.ResignFirstResponder();
    })
};
t.InputAccessoryView = toolbar;

3. 若需直接在页面展示选择器

如果不需要通过TextField触发，要直接将选择器展示在页面上，调整frame后添加到视图即可：

datePickerView.Frame = new CGRect(0, UIScreen.MainScreen.Bounds.Height - 230, UIScreen.MainScreen.Bounds.Width, 180);
Add(datePickerView);

内容的提问来源于stack exchange，提问作者Drake