.NET MAUI自定义DatePicker：点击图标唤起日期选择器

首先明确：不需要必须通过自定义DatePicker或自定义处理器就能实现需求，你调用Focus()没成功是因为不同平台的原生DatePicker控件行为差异——Focus()方法并不会在所有平台上自动唤起日期选择弹窗。

解决方法：调用平台原生代码触发弹窗 #

可以通过DependencyService实现跨平台的日期选择弹窗唤起，具体步骤如下：

1. 定义跨平台接口

public interface IDatePickerService
{
    void ShowDatePicker(DatePicker datePicker);
}

2. 分别在Android和iOS项目中实现该接口

Android平台实现

[assembly: Dependency(typeof(DatePickerServiceAndroid))]
namespace YourAppName.Droid
{
    public class DatePickerServiceAndroid : IDatePickerService
    {
        public void ShowDatePicker(DatePicker datePicker)
        {
            if (datePicker.Handler?.PlatformView is Android.Widget.DatePicker nativePicker)
            {
                var dialog = new DatePickerDialog(Android.App.Application.Context, (sender, args) =>
                {
                    datePicker.Date = args.Date;
                }, datePicker.Date.Year, datePicker.Date.Month - 1, datePicker.Date.Day);
                
                dialog.Show();
            }
        }
    }
}

iOS平台实现

[assembly: Dependency(typeof(DatePickerServiceiOS))]
namespace YourAppName.iOS
{
    public class DatePickerServiceiOS : IDatePickerService
    {
        public void ShowDatePicker(DatePicker datePicker)
        {
            if (datePicker.Handler?.PlatformView is UIDatePicker nativePicker)
            {
                var rootVC = UIApplication.SharedApplication.KeyWindow.RootViewController;
                var alertSheet = UIAlertController.Create(null, null, UIAlertControllerStyle.ActionSheet);
                
                var picker = new UIDatePicker
                {
                    Date = datePicker.Date.ToDateTime(),
                    MinimumDate = datePicker.MinimumDate.ToDateTime(),
                    MaximumDate = datePicker.MaximumDate.ToDateTime(),
                    PreferredDatePickerStyle = UIDatePickerStyle.Wheels
                };
                
                // 设置选择器布局
                picker.TranslatesAutoresizingMaskIntoConstraints = false;
                alertSheet.View.AddSubview(picker);
                NSLayoutConstraint.ActivateConstraints(new[]
                {
                    picker.TopAnchor.ConstraintEqualTo(alertSheet.View.TopAnchor, 20),
                    picker.LeftAnchor.ConstraintEqualTo(alertSheet.View.LeftAnchor, 20),
                    picker.RightAnchor.ConstraintEqualTo(alertSheet.View.RightAnchor, -20),
                    picker.HeightAnchor.ConstraintEqualTo(200)
                });
                
                // 添加确定和取消按钮
                alertSheet.AddAction(UIAlertAction.Create("确定", UIAlertActionStyle.Default, _ =>
                {
                    datePicker.Date = picker.Date.ToDateTimeOffset();
                }));
                alertSheet.AddAction(UIAlertAction.Create("取消", UIAlertActionStyle.Cancel, null));
                
                rootVC.PresentViewController(alertSheet, true, null);
            }
        }
    }
}

3. 修改按钮点击事件

private void ImageButton_Clicked(object sender, EventArgs e)
{
    DependencyService.Get<IDatePickerService>().ShowDatePicker(MyDatePicker);
}

优化：隐藏原生DatePicker #

如果不想显示原生的DatePicker输入框，可以将其设为隐藏：

<HorizontalStackLayout>
    <DatePicker x:Name="MyDatePicker" 
                MinimumDate="01/01/2022"
                MaximumDate="12/31/2022"
                Date="06/21/2022" 
                Visibility="Hidden" />
    <ImageButton Source="calendar.svg" Clicked="ImageButton_Clicked"></ImageButton>
</HorizontalStackLayout>

自定义DatePicker的可选方案 #

如果需要在多个页面复用这个功能，可以封装一个自定义控件，将DatePicker和ImageButton整合到一起，内部调用上面的IDatePickerService逻辑，这样不用每次重复写代码，但核心实现还是依赖平台原生逻辑，不需要自定义处理器。

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