Search code examples
razorblazorblazor-client-side

Why is the html input time control losing focus when it is bound to a property in blazor?

I have a html input time control in my razor page. When I click inside the control, it automatically highlights the hours part to enter hours. When the hours is entered, the control loses focus. It works fine if I remove the @bind from the element and it highlights the minutes part.

How can I make it work without removing @bind ? Thanks for any suggestions.

<input type="time" class="form-control"
                   step="300" @onblur="@(async () => await Update())"
                   @bind="Timer.Time" />
Solution

  • Don't know what is "Timer.Time"...However, here's how you can do it. You can improve on it, and format it according to your requirements.

    <input type="time" class="form-control"  @bind="@value" />

<div>@value</div>

@code {
        
    private DateTime value = DateTime.Now;
 
}