UWP XAML：CalendarDatePicker绑定DateTime为null时如何显示占位文本？

问题描述 #

使用CalendarDatePicker控件时，其Date属性绑定了一个DateTime对象。当绑定的Date值为null时，选择器会自动显示可用的最早日期（1/1/1922），但需求是此时仅显示PlaceholderText。当前使用的FuzzyDateConverter用于将单独的日、月、年转换为DateTime对象。

现有XAML代码：

<CalendarDatePicker 
    PlaceholderText="Pick a date"
    HorizontalAlignment="Stretch"
    DateFormat="{}{day.integer}/{month.integer}/{year.full}"
    LightDismissOverlayMode="On"
    Date="{x:Bind ViewModel.CompletedAt, Converter={StaticResource FuzzyDateConverter}}"/>

现有转换器代码：

public class FuzzyToDateTimeObject : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return new DateTimeOffset(((DateTime)value).ToUniversalTime());
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return ((DateTimeOffset)value).DateTime;
    }
}

解决步骤 #

1. 修改转换器处理null值 #

原转换器未处理输入为null的情况，导致控件 fallback 到默认最小日期。修改转换器，当输入为null时直接返回null，让控件识别未选择状态：

public class FuzzyToDateTimeObject : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value == null)
            return null;
            
        return new DateTimeOffset(((DateTime)value).ToUniversalTime());
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (value == null)
            return null;
            
        return ((DateTimeOffset)value).DateTime;
    }
}

2. 确保ViewModel属性支持null #

确认ViewModel.CompletedAt为可空DateTime类型，才能正确接收和传递null值：

public DateTime? CompletedAt { get; set; }

3. 调整绑定模式（可选） #

若需要双向绑定更新ViewModel，需设置Mode=TwoWay（x:Bind默认是OneTime）：

<CalendarDatePicker 
    PlaceholderText="Pick a date"
    HorizontalAlignment="Stretch"
    DateFormat="{}{day.integer}/{month.integer}/{year.full}"
    LightDismissOverlayMode="On"
    Date="{x:Bind ViewModel.CompletedAt, Converter={StaticResource FuzzyDateConverter}, Mode=TwoWay}"/>

原理说明 #

CalendarDatePicker的Date属性是DateTimeOffset?（可空类型），当绑定值为null时，控件会自动隐藏日期显示，转而展示PlaceholderText。修改转换器后，null值能正确传递给控件，触发占位文本的显示逻辑。

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