如何将时间类型的输入与 blazor 绑定答案

【问题标题】：How to bind input of type time with blazor如何将时间类型的输入与 blazor 绑定
【发布时间】：2023-04-10 04:52:01
【问题描述】：

您好，我有int 类型的int 变量，我想绑定到input 类型time 的min 和max 值。
我该怎么做？

我不知道在 bind 字段中放置什么，因为有 2 个不同的变量。还有min 和max 属性。

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

我应该在bind 中输入什么？

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

【问题讨论】：

你的模型中有一个字段吗？
我有 2 个 Timespan 类型的字段，我需要以某种方式将用户限制在一个区间 [ from hour - to Hour] ...例如 [ 13.00 17.00]

标签： input binding blazor

【解决方案1】：

您不能将 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); }
}

【讨论】：

【解决方案2】：

以前的解决方案不适用于 .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...
    }
}

【讨论】：

【解决方案3】：

我为此编写了一个小组件，它利用数据绑定并使用正确的数据类型。

用法：

<LabeledTime @bind-Value="shutdownDelay"></LabeledTime>

组件：

<label class="form-label" for="@LabelId">
    @ChildContent
</label>
<input id="@LabelId" type="time" value="@ValueInternal.ToString("hh\\:mm")" step="60" @onchange="InternalValueChanged"/>

@code {

    private long LabelId = DateTime.Now.Ticks;

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public TimeSpan Value { get; set; }

    [Parameter]
    public EventCallback<TimeSpan> ValueChanged { get; set; }

    private TimeSpan ValueInternal { get; set; }

    protected override void OnParametersSet()
    {
        ValueInternal = Value;
        base.OnParametersSet();
    }

    private void InternalValueChanged(ChangeEventArgs obj)
    {
        if (!TimeSpan.TryParseExact(obj.Value.ToString(), "hh\\:mm\\:ss", null, out var result))
            return;

        ValueInternal = result;
        Value = result;
        ValueChanged.InvokeAsync(result);
    }
}

【讨论】：

我使用它并对其进行了修改以使用新的 .net 6 TimeOnly 类型。工作得很好，谢谢。

【解决方案4】：

您还可以执行以下操作：

<input type="time" @bind="SomeTime" @bind:format="HH:mm"/>

@code {
    public DateTime SomeTime = new DateTime();

    private TimeSpan _time = SomeTime.TimeOfDay;
}

请注意这不会直接绑定到 TimeSpan！

【讨论】：