Blazor 以单向方式将值绑定到“输入日期”

Question

由于 Blazor 不支持停止事件传播，因此我需要对type="date"和onchange事件处理程序的输入元素进行单向绑定。

像这样的东西：

<input type="date" value="@_endDate" format-value="yyyy-MM-dd" onchange="@EndDate_change"/>

但这不起作用。 该页面包含 datePicker 但没有任何值。

“_endDate”是日期时间类型。

如果我使用双向绑定，那么一切正常。

<input type="date" bind="@_endDate" format-value="yyyy-MM-dd"/>

知道为什么第一个“输入”不起作用吗？ 是否有任何错误或者这是 blazor 中的错误？ 对于纯文本单向绑定与 onchange 事件可以正常工作。

Edit1: _endDate 包含当前日期并设置为 DateTime.Now

protected void EndDate_change(UIChangeEventArgs endDateEvent)
{
    _endDate = Convert.ToDateTime(endDateEvent.Value);
    StateHasChanged();
}

Answer 1

要同时保留@onchange=和单向value=使用这个

value="@someDate.ToString("yyyy-MM-dd")"

诀窍是格式化为字符串yyyy-MM-dd以从值中获取一种方式绑定。 使用不同的格式或仅使用DateTime对象无法在日期选择器中显示日期。

例子：

<input type="date" value="@knowledge.ActualShortTermDate.ToString("yyyy-MM-dd")" @onchange="@(async (e) => await updateDate(DateTime.Parse(e.Value.ToString())))" />

Answer 2

由于在 blazor 中 @bind-Value 和 @onchange 不能共同存在，因为现在这是最好的解决方法

<InputDate type="date" @bind-Value="@_endDate"/>
@code {
 private DateTime endDate;
public DateTime _endDate
{
    get { return endDate; }
    set
    {
        endDate = value;
        //Do Other tasks ......
        // Eg updateSomething();
    }
}
}

Answer 3

这应该可以工作...该错误可能在您的代码中。 如果您认为自己的代码很好，请在github中发布问题。

无需在EndDate_change方法中调用StateHasChanged，因为它是自动调用的。

不确定为什么不能使用bind属性...但是，您可以在表单组件中使用InputDate组件，以停止事件传播（提交）。

希望这可以帮助...

Answer 4

自 .NET Core 3.1 Preview 2 起，Blazor 应用程序支持阻止事件的默认操作和停止事件传播，请在此处查看此链接

Answer 5

尝试使用@bind-Value 而不仅仅是@bind，它对我有用

        <div class="col-4 border border-primary border-0 text-left">
            <InputDate id="expenseedate" class="form-control form-control-sm col-4" format-value="yyyy-MM-dd" @bind-Value="@_endDate" @oninput="@ResetError" placeholder="Enter Expense end Date"></InputDate>
        </div>

Answer 6

要使用 blazor 元素表示时间：

<InputDate Type="InputDateType.Time" 
class="form-eliment" @bind-Value="model.attribute"> </InputDate>

Answer 7

使用 blazor 元素表示时间：

 
 


  
 
  
  
 
   
<InputDate Type="InputDateType.Time" class="form-eliment jds-d-inline-block jds-max-width150" @bind-Value="model.RunAutomaticallyAt"> </InputDate>