Blazor 以一种方式将值绑定到“输入日期”

Question

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

是这样的：

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

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

“_endDate”是 DateTime 类型。

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

<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 {&nbsp;private DateTime endDate;public DateTime _endDate{&nbsp; &nbsp; get { return endDate; }&nbsp; &nbsp; set&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; endDate = value;&nbsp; &nbsp; &nbsp; &nbsp; //Do Other tasks ......&nbsp; &nbsp; &nbsp; &nbsp; // Eg updateSomething();&nbsp; &nbsp; }}}

Answer 3

它对我有用&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 border border-primary border-0 text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </div>

Answer 4

使用时间的 blazor 元素：<InputDate&nbsp;Type="InputDateType.Time"&nbsp;class="form-eliment&nbsp;jds-d-inline-block&nbsp;jds-max-width150"&nbsp;@bind-Value="model.RunAutomaticallyAt">&nbsp;</InputDate>

Answer 5

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