Xamarin自定义带占位符DatePicker确认默认当日日期不回显问题

算力阿峰

2026-8-29

问题根因

你的判断完全准确。该异常的触发逻辑如下：

自定义控件的NullableDate属性默认值为null，初始状态下控件显示占位符文本
原生DatePicker的Date依赖属性默认值就是当日日期，唤起日期选择弹窗时，弹窗内预选的日期也默认为当日
打开弹窗后直接点击确认、未滑动选择其他日期时，Date属性值和弹窗唤起前完全一致，不会触发Date属性的变更通知
原有逻辑中写在OnPropertyChanged里、监听Date变化同步赋值给NullableDate的代码不会执行，NullableDate始终为null，控件就会持续显示占位符，不会回填选中的当日日期。

另外原代码存在一个隐藏bug：NullableDate的CLR属性封装中直接调用UpdateDate，但通过绑定或SetValue直接给依赖属性赋值时不会走CLR属性的set块，会导致UI更新逻辑不触发。

修复方案

无需编写平台特定代码，做两处调整即可解决问题：

给控件添加焦点事件监听：当控件获得焦点、日期选择弹窗即将唤起时，如果当前NullableDate为空，先临时将Date设为DateTime.MinValue。弹窗弹出后系统会自动预选当日日期，用户点击确认时Date值必然发生变更，就会正常触发属性同步逻辑，整个过程用户无感知，不会出现显示异常。
将NullableDate的属性变更回调迁移到依赖属性注册的配置中，确保所有赋值场景下都能触发UI更新，同时添加值相等判断，避免不必要的递归触发。

修复后完整代码

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XXX.XXX.Mobile.Controls
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class DatePickerWithPlaceHolder : DatePicker
    {
        public static readonly BindableProperty NullableDateProperty = BindableProperty.Create(
            nameof(NullableDate),
            typeof(DateTime?),
            typeof(DatePickerWithPlaceHolder), 
            null, 
            BindingMode.TwoWay,
            propertyChanged: OnNullableDateChanged);

        private string _format;

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

        public DatePickerWithPlaceHolder()
        {
            InitializeComponent();
            Focused += OnPickerFocused;
        }

        private void OnPickerFocused(object sender, FocusEventArgs e)
        {
            // 空值状态下唤起选择器前临时修改Date值，确保选当日点确认能触发属性变更
            if (!NullableDate.HasValue)
            {
                Date = DateTime.MinValue;
            }
        }

        private static void OnNullableDateChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is DatePickerWithPlaceHolder picker)
            {
                picker.UpdateDate();
            }
        }

        private void UpdateDate()
        {
            if (NullableDate.HasValue)
            {
                if (!string.IsNullOrEmpty(_format)) 
                {
                    Format = _format;
                }
                // 值未变化时不重复赋值，避免递归触发属性变更
                if (Date != NullableDate.Value)
                {
                    Date = NullableDate.Value;
                }
                FontAttributes = FontAttributes.None;
                TextColor = Color.Black;
            }
            else
            {
                _format = Format;
                Format = "Select Date";
                FontAttributes = FontAttributes.Italic;
                TextColor = Color.Gray;
            }
        }

        protected override void OnBindingContextChanged()
        {
            base.OnBindingContextChanged();
            UpdateDate();
        }

        protected override void OnPropertyChanged(string propertyName = null)
        {
            base.OnPropertyChanged(propertyName);
            if (propertyName == nameof(Date))
            {
                // 过滤临时设置的最小值，避免无效赋值
                if (Date != DateTime.MinValue)
                {
                    NullableDate = Date;
                }
            }
        }
    }
}

验证要点

初始未选日期时，正常显示灰色斜体的Select Date占位符
点击唤起日期弹窗直接点确认，当日日期可正常回填，显示为配置的常规日期格式、黑色常规字体
滑动选择其他日期后点确认，日期可正常同步显示
双向绑定场景下，NullableDate属性读写正常，UI可同步更新
手动将NullableDate设为null时，可正常切回占位符显示状态

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