Blazor中如何使InputDate组件支持输入获取时分秒值

Blazor 内置的InputDate组件默认渲染为HTML原生<input type="date">控件，这个控件本身就只支持选择年月日，不包含时分秒选择能力。你写的@bind-Value:format参数仅用来控制C#侧值和表单值的字符串转换格式，不会修改底层输入控件的类型，所以改格式字符串没法调出时间选择功能。

你可以根据自己的需求选下面任意一种方案：

方案1：直接使用原生datetime-local输入（零依赖，最简便） #

HTML原生提供了<input type="datetime-local">控件，本身就支持同时选择日期和时分秒，你只需要给InputDate显式指定type属性，同时把绑定格式改成控件要求的ISO格式即可：

<div class="form-group">
    <label for="Validade" class="p-3">Validade</label>
    <InputDate 
        type="datetime-local"
        @bind-Value="@InfracaoDto.Validade" 
        @bind-Value:format="yyyy-MM-ddTHH:mm:ss" />
    <ValidationMessage For="@(()=>InfracaoDto.Validade)" />
</div>

注意：

• 绑定格式必须写成yyyy-MM-ddTHH:mm:ss，不能用你原来的dd/MM/yyyy hh:mm:ss，datetime-local控件只认ISO格式的字符串，格式不对会导致绑定失效。
• 部分浏览器的原生datetime-local控件默认只提供到分钟的选择，秒数需要用户手动输入，如果必须要可视化选秒，建议选后面两种方案。

方案2：拆分日期+时间两个输入框（兼容性最好） #

如果需要兼容旧版浏览器，或者要更灵活的控制，可以把日期和时间拆成两个独立输入框，选择完成后在代码里合并成完整的DateTime值：

<div class="form-group">
    <label for="Validade" class="p-3">Validade</label>
    <div class="d-flex gap-2">
        <InputDate @bind-Value="dataSelecionada" @onchange="AtualizarValorValidade" />
        <InputText type="time" step="1" @bind-Value="horaSelecionada" @onchange="AtualizarValorValidade" />
    </div>
    <ValidationMessage For="@(()=>InfracaoDto.Validade)" />
</div>

@code {
    private DateTime dataSelecionada;
    private TimeSpan horaSelecionada;

    protected override void OnInitialized()
    {
        // 初始化时从原有Dto值拆分日期和时间
        dataSelecionada = InfracaoDto.Validade.Date;
        horaSelecionada = InfracaoDto.Validade.TimeOfDay;
        base.OnInitialized();
    }

    private void AtualizarValorValidade()
    {
        InfracaoDto.Validade = dataSelecionada.Add(horaSelecionada);
    }
}

这里给time输入加了step="1"属性，可以支持秒级选择。

方案3：使用第三方组件库的DateTimePicker（功能最丰富） #

如果你需要更完善的功能，比如自定义可选时间范围、禁用特定日期、统一跨浏览器样式、秒级可视化选择，可以直接用成熟Blazor组件库提供的日期时间选择器组件，常见的开源组件库都自带开箱即用的支持时分秒的选择控件，不需要自己写额外逻辑。

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