C# Blazor 和数据绑定(bind)到 DateTime？

Question

我必须为现有 的日期和时间输入字段添加数据验证Asp.net Core 3.1 Blazor 项目;这是我第一次与 Blazor 合作。

我在日期输入字段(具有日期选择器和绑定(bind)到 DateTime 变量的数据)上设置了数据绑定(bind)，没有问题。但是，时间输入的情况并不相同(它有一个时间选择器并绑定(bind)到另一个 DateTime 变量。)

简而言之，当用户使用时间选择器设置时间并关闭它时，输入字段中的时间会回到最初设置的时间。例如，如果时间输入当前设置为上午 12:00，然后用户从时间选择器中选择一个新时间(比如说下午 2:00)，则用户单击确定并关闭时间选择器，即输入中的时间回到凌晨 12:00。我在同一页面上有另一个时间输入，但数据绑定(bind)到字符串而不是 DateTime，如果在时间选择器中再次设置时间，则保留时间。

我写了一个很短的程序来演示这个问题。我的示例页面有三个输入字段:日期、时间和另一个时间，但它的数据绑定(bind)到一个字符串。

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="wrapper">
  <section class="createevent">
    <EditForm EditContext="@_editContext" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
      <DataAnnotationsValidator />
      <div class="form-group">
        <p>
          <label>
            Date:
          </label>
          <input id="txtDate" type="date" required @bind-value="_timeSample.date" />
          <ValidationMessage For="@(() => _timeSample.date)" />
        </p>
      </div>
      <div class="form-group">
        <p>
          <label>
            Time:
          </label>
          <input id="txtTime" type="time" required @bind="_timeSample.time" />
          <ValidationMessage For="@(() => _timeSample.time)" />
        </p>
      </div>
      <div class="form-group">
        <p>
          <label>
            Time2:
          </label>
          <InputText id="txtTime2" type="time" required @bind-Value="_timeSample.text" />
          <ValidationMessage For="@(() => _timeSample.text)" />
        </p>
      </div>
    </EditForm>
  </section>
</div>

@code
{
  public class TimeSample
  {
    public DateTime date { get; set; }
    public DateTime time { get; set; }
    public string text { get; set; }
  };

  private EditContext _editContext;
  private TimeSample _timeSample = new TimeSample();

  protected override void OnInitialized()
  {
    _editContext = new EditContext(_timeSample);
  }

  private void HandleValidSubmit()
  {
  }

  protected void HandleInvalidSubmit()
  {
  }

}

Answer 1

你使用的是什么浏览器 ？我使用 Chrome 运行了您的代码，但无法重现该问题...我认为它与 Blazor 无关，而是与您使用的浏览器有关。请用其他浏览器试试你的代码

希望这可以帮助...