如何使用 blazor 绑定时间类型的输入

Question

你好，我有2类型的变量int，我想绑定到min和max的值input类型time。
我怎样才能做到这一点？由于有 2 个不同的变量，

我不知道该在该bind字段中放置什么。还有min和max属性。

<input type="time" min="@model.min" max="@model.max" bind=?/>

我应该在里面放什么bind？

更新 在更彻底的分析中，我决定我需要 2 个类型的变量，Timespan并将它们绑定到 2 个类型的输入time。

Answer 1

.NET 6.0.8 现在在 中提供了很好的功能InputDate，支持该TimeOnly类型（以及其他类型）。我在研究 .NET 源代码并准备创建自己的源代码时发现了这一点（由于 ccStars 的回答）

<InputDate Type="InputDateType.Time" @bind-Value="@model.TimeVar" />

哪里TimeVar有类型TimeOnly?。很高兴它可以处理可为空的类型。

Answer 2

您不能将 TimeSpan 直接绑定到 Blazor 中的输入，但您可以使用属性将其转换为字符串或从字符串转换。

<input type="time" min="@model.min" max="@model.max" bind="@TimeProxy" />

和

@functions
{
  string TimeProxy { get => model.Time.ToString(); set => TimeSpan.TryParse(value,out model.Time); }
}

Answer 3

以前的解决方案不适用于 .net Core 3.1，因此我将添加一个更新的解决方案：

使用 Blazor ：

<EditForm Model=@model OnValidSubmit="Submit">
    <InputText type="time" @bind-Value="TimeProxy" />
</EditForm>

代码更改也是必要的。

@code {
    // This field is required as you can not use property in out statement
    private TimeSpan LocalTime = TimeSpan.FromHours(0);
    private string TimeProxy { 
        get => model.Time.ToString();
        set => TimeSpan.TryParse(value,out LocalTime);
    }
    private void Submit() {
        model.Time = LocalTime;
        // following submit logic...
    }
}