How to bind input of type time with blazor

Question

Hello i have 2 variables of type int that i would like to bind to the min and max values of an input of type time.
How can i do this?

I do not know what to place in the bind field since there are 2 different variables. Also there is the min and max attributes.

<input type="time" min="@model.min" max="@model.max" bind=?/>

What should i put in the bind ?

Update On a more thoroughly analysis i decided i will need 2 variables of type Timespan and i will bind these to 2 inputs of type time.

Answer 1

You cannot bind a TimeSpan directly to an input in Blazor, but you can use a property to convert it to/from a string.

<input type="time" min="@model.min" max="@model.max" bind="@TimeProxy" />

and

@functions
{
  string TimeProxy { get => model.Time.ToString(); set => TimeSpan.TryParse(value,out model.Time); }
}

Answer 2

Previous solution was not working for me with .net Core 3.1 so I'll add an updated one:

Use Blazor :

<EditForm Model=@model OnValidSubmit="Submit">
    <InputText type="time" @bind-Value="TimeProxy" />
</EditForm>

Code changes are necessary as well.

@code {
    // This field is required as you can not use property in out statement
    private TimeSpan LocalTime = TimeSpan.FromHours(0);
    private string TimeProxy { 
        get => model.Time.ToString();
        set => TimeSpan.TryParse(value,out LocalTime);
    }
    private void Submit() {
        model.Time = LocalTime;
        // following submit logic...
    }
}