使用带有ValidationMessage的inherits InputBase<DateTime>的自定义Blazor DateTime

在Blazor中创建一个自定义的DateTime输入组件，继承自InputBase<DateTime>并使用ValidationMessage，涉及到几个关键概念和技术点。下面是一次性的完整答案：

基础概念

Blazor: 是一个用于构建交互式Web UI的框架，使用C#代替JavaScript。
InputBase<TValue>: Blazor中的一个基础组件，用于创建各种输入控件。
ValidationMessage: 显示验证错误信息的组件。

类型与应用场景

自定义输入组件: 可以根据具体需求定制输入控件的外观和行为。
日期时间输入: 特别适用于需要用户输入日期时间的场景。

示例代码

以下是一个简单的自定义DateTime输入组件的示例：

using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Web;
using System.Globalization;

public class CustomDateTimeInput : InputBase<DateTime?>
{
    protected override bool TryParseValueFromString(string? value, out DateTime? result, out string? validationErrorMessage)
    {
        if (DateTime.TryParseExact(value, "yyyy-MM-dd", CultureInfo.InvariantCulture, DateTimeStyles.None, out DateTime parsedValue))
        {
            result = parsedValue;
            validationErrorMessage = null;
            return true;
        }
        else
        {
            result = null;
            validationErrorMessage = "日期格式不正确，应为 yyyy-MM-dd";
            return false;
        }
    }

    protected override void OnInput(ChangeEventArgs e)
    {
        var stringValue = e.Value?.ToString();
        if (!string.IsNullOrEmpty(stringValue))
        {
            if (TryParseValueFromString(stringValue, out var parsedValue))
            {
                CurrentValueAsString = stringValue; // 更新绑定的值
            }
        }
        else
        {
            CurrentValueAsString = null;
        }
        InvokeValidation();
    }

    protected override string FormatValueAsString(DateTime? value)
    {
        return value?.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture) ?? string.Empty;
    }
}

使用组件

在你的Blazor页面中使用这个自定义组件：

<EditForm Model="@model">
    <CustomDateTimeInput @bind-Value="model.Date" />
    <ValidationMessage For="@(() => model.Date)" />
</EditForm>

@code {
    private ModelClass model = new ModelClass();
}