.NET MAUI DatePicker如何设置默认显示未选中状态

.NET MAUI的DatePicker控件的Date属性是非可空的DateTime类型，所以当你绑定的AppointmentDate为null时，控件会自动回退显示当前系统日期，这是控件的默认行为。要实现默认未选中（显示占位提示）的效果，可以通过以下两种常用方法解决：

方法一：叠加占位Label（快速实现） #

通过在DatePicker上方叠加一个Label，当绑定的日期为null时显示提示文本，选中日期后隐藏该Label，模拟未选中状态。

步骤1：创建空值转可见性转换器 #

using Microsoft.Maui.Controls;

namespace YourAppNamespace
{
    public class NullToVisibleConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            // 当值为null时显示Label
            return value == null;
        }

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

步骤2：在XAML中布局并绑定 #

先在页面资源中声明转换器（需添加sys命名空间：xmlns:sys="clr-namespace:System;assembly=netstandard"）：

<ContentPage.Resources>
    <local:NullToVisibleConverter x:Key="NullToVisibleConverter" />
</ContentPage.Resources>

然后用Grid包裹DatePicker和占位Label：

<Grid Margin="10">
    <DatePicker 
        x:Name="AppointmentDatePicker"
        Date="{Binding AppointmentDate, TargetNullValue={x:Static sys:DateTime.MinValue}}"                          
        >
        <DatePicker.Behaviors>
            <toolkit:EventToCommandBehavior
                Command="{Binding AppointmentDateChangedCommand}"
                CommandParameter="{Binding Date, Source={x:Reference AppointmentDatePicker}}"
                EventName="DateSelected" />
        </DatePicker.Behaviors>
    </DatePicker>
    <!-- 占位提示Label，日期为空时显示 -->
    <Label 
        Text="请选择预约日期"
        HorizontalOptions="Start"
        VerticalOptions="Center"
        Margin="15,0"
        IsVisible="{Binding AppointmentDate, Converter={StaticResource NullToVisibleConverter}}"
        BackgroundColor="White" />
</Grid>

方法二：自定义可空DatePicker控件（优雅复用） #

创建继承自DatePicker的自定义控件，添加NullableDate可空属性，同时针对不同平台原生控件设置占位提示，从根源上处理空值显示逻辑。

步骤1：实现自定义控件 #

using Microsoft.Maui.Controls;

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

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

        private static void OnNullableDateChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is NullableDatePicker picker)
            {
                // 空值时设为最小日期，避免显示当前日期
                picker.Date = newValue is DateTime selectedDate ? selectedDate : DateTime.MinValue;
                picker.UpdatePlaceholder();
            }
        }

        protected override void OnHandlerChanged()
        {
            base.OnHandlerChanged();
            UpdatePlaceholder();
        }

        private void UpdatePlaceholder()
        {
            if (Handler == null) return;

            // 针对不同平台设置原生控件的占位提示
#if ANDROID
            if (Handler.PlatformView is Android.Widget.EditText editText)
            {
                editText.Hint = NullableDate == null ? "请选择日期" : string.Empty;
            }
#elif IOS
            if (Handler.PlatformView is UIKit.UIDatePicker datePicker && datePicker.Superview is UIKit.UITextField textField)
            {
                textField.Placeholder = NullableDate == null ? "请选择日期" : string.Empty;
            }
#endif
        }
    }
}

步骤2：在XAML中使用自定义控件 #

<local:NullableDatePicker 
    x:Name="AppointmentDatePicker"
    NullableDate="{Binding AppointmentDate}"                          
    Margin="10"  >
    <local:NullableDatePicker.Behaviors>
        <toolkit:EventToCommandBehavior
            Command="{Binding AppointmentDateChangedCommand}"
            CommandParameter="{Binding NullableDate, Source={x:Reference AppointmentDatePicker}}"
            EventName="DateSelected" />
    </local:NullableDatePicker.Behaviors>
</local:NullableDatePicker>

关键注意点 #

• ViewModel中的AppointmentDate必须是DateTime?（可空类型），否则无法绑定空值。
• 使用自定义控件时，命令参数要绑定NullableDate而非原生的Date属性，确保ViewModel能获取到正确的可空值。

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