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

Question

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

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

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

我应该在bind里放什么？

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

Answer 1

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

使用布莱泽 ：

<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...
}
}

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 6.0.8 现在在InputDate中对此具有很好的功能，支持TimeOnly类型(以及其他类型)。当我研究.NET源代码并准备创建自己的源代码时，我发现了(由于ccStars的回答)

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

其中TimeVar的类型为TimeOnly?。很高兴它处理可为空的类型。

Answer 4

您还可以执行以下操作：

<input type="time" @bind="SomeTime" @bind:format="HH:mm"/>
@code {
public DateTime SomeTime = new DateTime();
private TimeSpan _time = SomeTime.TimeOfDay;
}

请不要直接绑定到时间跨度！

Answer 5

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

用法：

<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);
}
}

Answer 6

希望这有所帮助，我也在尝试绑定一个 Timespan 输入type="time"我在以下站点的帮助下设法实现它 https://www.meziantou.net/creating-a-inputselect-component-for-enumerations-in-blazor.htm

这是我为实现此>InputTime而创建的代码.cs

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Rendering;
using System;
using System.Globalization;
namespace Example
{
public sealed class InputTime : InputBase<TimeSpan>
{
protected override void BuildRenderTree(RenderTreeBuilder builder)
{    
builder.OpenElement(0, "input");
builder.AddAttribute(1, "type", "time");
builder.AddMultipleAttributes(2, AdditionalAttributes);
builder.AddAttribute(3, "class", CssClass);
builder.AddAttribute(4, "value", BindConverter.FormatValue(CurrentValueAsString));
builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder<string>(this, value => CurrentValueAsString = value, CurrentValueAsString, null));
builder.CloseElement(); // close the select element
}

protected override bool TryParseValueFromString(string value, out TimeSpan result, out string validationErrorMessage)
{        
validationErrorMessage = null;
return BindConverter.TryConvertTo<TimeSpan>(value, CultureInfo.CurrentCulture, out result);
}
}
}

剃刀页面

<div class="form-group">
<label>Time From</label>
<InputTime @bind-Value="MyModel.TimeFrom" class="form-control"></InputTime>
<ValidationMessage For="() => MyModel.TimeFrom"></ValidationMessage>
</div>