Blazor 自定义可重用基础组件之 限制输入日期范围的DateNullBox

DateTime 和 DateTime?很不好搞，它不像string和string?有默认的转换，只是string不能为null。如果将TValue设为DateTime，就不能绑定DateTime?属性，同样，设为DateTime?，也不能绑定DateTime属性。所以前面一篇文章只能适用于DateTime属性，兼容性差，只能另搞一个DateTime？的组件。

@using System.Linq.Expressions;

<div class="d-flex">
    <label class="control-label w-auto mt-2"><b>@Lable</b></label>
    <div style="width:@InputWidth">
        <input type="date" value="@CurrentValueAsString" @onchange="DateStringChanged" class="form-control" disabled="@Disabled" @ref="Element" @attributes="AdditionalAttributes" />
        <span class="w-100"><ValidationMessage For="DateExpression" /></span>
    </div>
</div>
@code {

    [Parameter]
    public required string Lable { get; set; }

    [Parameter]
    public DateTime? Date { get; set; }

    [Parameter]
    public EventCallback<DateTime?> DateChanged { get; set; }

    [Parameter]
    public Expression<Func<DateTime?>>? DateExpression { get; set; }

    [Parameter]
    public string InputWidth { get; set; } = "300";

    [Parameter]
    public bool Disabled { get; set; }

    [Parameter]
    public DateTime? MaxDate { get; set; }

    [Parameter]
    public DateTime? MinDate { get; set; }

    private IReadOnlyDictionary<string, object>? AdditionalAttributes;

    private string CurrentValueAsString = string.Empty;
    private const string DateFormat = "yyyy-MM-dd";

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        Lable += "：";
        InputWidth += "px;";
        Dictionary<string, object> keyValues = new();
        if (MaxDate.HasValue)
        {
            keyValues.Add("max", MaxDate.Value.ToString(DateFormat));
        }
        if (MinDate.HasValue)
        {
            keyValues.Add("min", MinDate.Value.ToString(DateFormat));
        }
        AdditionalAttributes = keyValues;
        if (DateExpression == null)
        {
            throw new InvalidOperationException($"Date requires a value for the 'DateExpression'" +
                $"parameter. Normally this is provided automatically when using 'bind-Date'.");
        }
        FormatValueAsString(Date);

    }
    [DisallowNull] public ElementReference? Element { get; protected set; }

    private void FormatValueAsString(DateTime? date)
    {
        if (date.HasValue)
        {
            CurrentValueAsString = date.Value.ToString(DateFormat);
        }
    }
    private async void DateStringChanged(ChangeEventArgs e)
    {
        if (e.Value != null)
        {
            CurrentValueAsString = (string)e.Value;
            await DateChanged.InvokeAsync(ParseDateFromString(CurrentValueAsString));
        }
    }
    private DateTime? ParseDateFromString(string dateString)
    {
        if (dateString == string.Empty)
        {
            return null;
        }
        return DateTime.Parse(dateString);
    }
}

使用：

<EditForm Model="myDate">
    <DataAnnotationsValidator/>
    <DateBox Lable="测试日期" @bind-Date="myDate.Date1" InputWidth="220" MaxDate="@maxDate" MinDate="@minDate"/>
    <DateNullBox Lable="日期可空" @bind-Date="myDate.Date2" InputWidth="220" MaxDate="@maxDate" MinDate="@minDate" />
</EditForm>
@code{
    private MyDate myDate = new();
    private DateTime maxDate = DateTime.Today;
    private DateTime minDate = new DateTime(2022, 1, 1);
    internal class MyDate
    {
        internal DateTime Date1 { get; set; }
        internal DateTime? Date2 { get; set; }
    }

}

效果：

 DateBox.razor：

@using System.Linq.Expressions;

<div class="d-flex">
    <label class="control-label w-auto mt-2"><b>@Lable</b></label>
    <div style="width:@InputWidth">
        <input type="date" value="@CurrentValueAsString" @onchange="DateStringChanged" class="form-control" disabled="@Disabled" @ref="Element" @attributes="AdditionalAttributes" />
        <span class="w-100"><ValidationMessage For="DateExpression" /></span>
    </div>
</div>
@code {
    [Parameter]
    public required string Lable { get; set; }

    [Parameter]
    public DateTime Date { get; set; }

    [Parameter]
    public EventCallback<DateTime> DateChanged { get; set; }

    [Parameter]
    public Expression<Func<DateTime>>? DateExpression { get; set; }

    [Parameter]
    public string InputWidth { get; set; } = "300";

    [Parameter]
    public bool Disabled { get; set; }

    [Parameter]
    public DateTime? MaxDate { get; set; }

    [Parameter]
    public DateTime? MinDate { get; set; }

    private IReadOnlyDictionary<string, object>? AdditionalAttributes;


    private string CurrentValueAsString = string.Empty;
    private const string DateFormat = "yyyy-MM-dd";

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        Lable += "：";
        InputWidth += "px;";
        Dictionary<string, object> keyValues = new();
        if (MaxDate.HasValue)
        {
            keyValues.Add("max", MaxDate.Value.ToString(DateFormat));
        }
        if (MinDate.HasValue)
        {
            keyValues.Add("min", MinDate.Value.ToString(DateFormat));
        }
        AdditionalAttributes = keyValues;
        if (DateExpression == null)
        {
            throw new InvalidOperationException($"{GetType()} requires a value for the 'DateExpression'" +
                $"parameter. Normally this is provided automatically when using 'bind-Date'.");
        }
        FormatValueAsString(Date);

    }
    [DisallowNull] public ElementReference? Element { get; protected set; }

    private void FormatValueAsString(DateTime date)
    {
        if (date != DateTime.MinValue)
        {
            CurrentValueAsString = date.ToString(DateFormat);
        }
    }
    private async void DateStringChanged(ChangeEventArgs e)
    {
        if (e.Value != null)
        {
            CurrentValueAsString = (string)e.Value;
            await DateChanged.InvokeAsync(ParseDateFromString(CurrentValueAsString));
        }
    }
    private DateTime ParseDateFromString(string dateString)
    {
        return DateTime.Parse(dateString);
    }
}