C# Blazor and data binding to a DateTime?

Question

I have to add data validation for a Date and Time input fields for an existing Asp.net Core 3.1 Blazor project; this is my first time working with Blazor.

I have setup data binding on the date input field (which has a Date picker and data bound to a DateTime variable) with no problems. However, the case is not the same for the time input (which has a Time picker and is bound to another DateTime variable.)

In short, when the user uses the time picker to set the time and closes it, the time in the input field goes back to the time that it was originally set to. For example, if the time input is currently set at 12:00 AM and then user selects a new time from the Time picker (lets say 2:00 PM), the user clicks ok and closes the Time picker, the time in the input goes back to 12:00 AM. I have another time input on the same page but data bound to a string instead of DateTime, and if the time is set again in the Time picker, the time is preserved.

I wrote a very short program to demonstrate the problem. My sample page has three input fields: Date, Time and another Time but its data bind to a string.

@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()
  {
  }

}

Solution

What browser are you using ? I ran your code with Chrome, and I could not reproduce the issue... I don't think it is related to Blazor, but rather to the browser you're using. Please, try your code with other browser

hope this helps...