Blazor自定义InputDate默认显示01/01/0001绑定可空DateTime报错如何解决

报错与异常显示根源 #

• 类型转换报错根源：你的自定义组件继承自InputBase<DateTime>（非可空时间类型），但绑定的模型属性QuoteDate是DateTime?（可空时间类型），二者类型不一致导致绑定过程中无法完成隐式转换，触发对应报错。
• 默认显示01/01/0001根源：非可空DateTime的默认值为DateTime.MinValue也就是0001年1月1日，只要组件绑定的是非可空类型且未主动赋值，就会默认显示这个异常日期。

@using System.Linq.Expressions
@inherits InputBase<DateTime?>

<div class=@ColumnLocation>
    @if (!string.IsNullOrWhiteSpace(Label))
    {              
        <label for="@Id">@Label</label>
    }                   
    <InputDate @bind-Value="@CurrentValue" class="form-control" placeholder="Enter date of preference"></InputDate>
    <ValidationMessage For="@ValidationFor" />
</div>

@code {
    [Parameter] public string Id { get; set; }
    [Parameter] public string Label { get; set; }
    // 表达式返回值同步修改为可空时间类型，和组件继承的泛型类型匹配
    [Parameter] public Expression<Func<DateTime?>> ValidationFor { get; set; }

    protected override bool TryParseValueFromString(string value, out DateTime? result, out string validationErrorMessage)
    {
        // 兼容空值输入，对应未选择日期的场景
        if (string.IsNullOrWhiteSpace(value))
        {
            result = null;
            validationErrorMessage = null;
            return true;
        }
        // 改用TryParse避免非法输入抛出异常
        if (DateTime.TryParse(value, out var parsedDate))
        {
            result = parsedDate;
            validationErrorMessage = null;
            return true;
        }
        result = null;
        validationErrorMessage = "请输入合法的日期格式";
        return false;
    }
}

无需修改现有模型、页面代码，自定义组件修改完成后直接使用即可：

1. 未主动赋值时默认会显示dd/mm/yyyy格式占位符，和原生InputDate表现完全一致
2. 可空类型兼容原有的[Required]校验规则，未选择日期时会正常触发必填提示

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