Xamarin MAUI可空日期选择器（Nullable DatePicker）解决方案咨询

1. 自定义封装控件 #

创建一个包含日期选择交互和清空功能的自定义ContentView，通过绑定属性实现可空日期的管理：

using Microsoft.Maui.Controls;

namespace YourNamespace.Controls
{
    public class NullableDatePicker : ContentView
    {
        public static readonly BindableProperty NullableDateProperty =
            BindableProperty.Create(nameof(NullableDate), typeof(DateTime?), typeof(NullableDatePicker), null,
                propertyChanged: OnNullableDateChanged);

        public static readonly BindableProperty PlaceholderProperty =
            BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(NullableDatePicker), "选择日期");

        public DateTime? NullableDate
        {
            get => (DateTime?)GetValue(NullableDateProperty);
            set => SetValue(NullableDateProperty, value);
        }

        public string Placeholder
        {
            get => (string)GetValue(PlaceholderProperty);
            set => SetValue(PlaceholderProperty, value);
        }

        private DatePicker _datePicker;
        private Button _clearButton;

        public NullableDatePicker()
        {
            BuildUI();
        }

        private void BuildUI()
        {
            _datePicker = new DatePicker
            {
                Format = "yyyy-MM-dd",
                IsVisible = false
            };
            _datePicker.DateSelected += DatePicker_DateSelected;

            var displayLabel = new Label
            {
                VerticalTextAlignment = TextAlignment.Center,
                HorizontalTextAlignment = TextAlignment.Start
            };
            displayLabel.SetBinding(Label.TextProperty, new Binding(nameof(NullableDate), source: this,
                converter: new NullableDateToStringConverter(), converterParameter: Placeholder));

            _clearButton = new Button
            {
                Text = "×",
                FontSize = 18,
                WidthRequest = 30,
                IsVisible = false
            };
            _clearButton.Clicked += ClearButton_Clicked;

            var tapGesture = new TapGestureRecognizer();
            tapGesture.Tapped += TapGesture_Tapped;
            displayLabel.GestureRecognizers.Add(tapGesture);

            Content = new HorizontalStackLayout
            {
                Children = { displayLabel, _clearButton },
                Spacing = 5,
                Padding = new Thickness(10, 5)
            };
        }

        private void TapGesture_Tapped(object sender, TappedEventArgs e)
        {
            _datePicker.Focus();
        }

        private void DatePicker_DateSelected(object sender, DateChangedEventArgs e)
        {
            NullableDate = e.NewDate;
            _clearButton.IsVisible = NullableDate.HasValue;
        }

        private void ClearButton_Clicked(object sender, EventArgs e)
        {
            NullableDate = null;
            _clearButton.IsVisible = false;
        }

        private static void OnNullableDateChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var picker = (NullableDatePicker)bindable;
            if (newValue is DateTime date)
            {
                picker._datePicker.Date = date;
                picker._clearButton.IsVisible = true;
            }
            else
            {
                picker._clearButton.IsVisible = false;
            }
        }
    }

    public class NullableDateToStringConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is DateTime date)
            {
                return date.ToString("yyyy-MM-dd");
            }
            return parameter?.ToString() ?? "选择日期";
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

2. 在页面中使用控件 #

在XAML中引用自定义控件，并绑定可空日期属性：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourNamespace.Controls"
             x:Class="YourNamespace.Views.YourPage">
    <VerticalStackLayout Padding="20">
        <controls:NullableDatePicker 
            NullableDate="{Binding SelectedDate}"
            Placeholder="请选择日期"
            Margin="0,10"/>
        <!-- 其他页面控件 -->
    </VerticalStackLayout>
</ContentPage>

3. 视图模型绑定示例 #

在对应ViewModel中定义可空DateTime属性，实现属性变更通知：

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace YourNamespace.ViewModels
{
    public class YourViewModel : INotifyPropertyChanged
    {
        private DateTime? _selectedDate;
        public DateTime? SelectedDate
        {
            get => _selectedDate;
            set
            {
                _selectedDate = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

关键说明 #

• 用Label模拟日期显示区域，点击唤起原生DatePicker，避免原生控件默认显示当前日期的问题
• 清空按钮仅在选择日期后可见，点击后将可空日期置为null
• 通过转换器处理可空日期与显示文本的转换，未选择时显示自定义占位符

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