Una hora de inicio y una de fin en un solo campo, cada una escrita en el formato del idioma actual.
Por qué ayuda
- Inicio y fin juntos
- Según el idioma
- Un campo compacto
Dónde encaja
- Turnos
- Horarios de apertura
- Franjas de reunión
Ejemplo
<TimeRangePicker @bind-Value="_hours" Label="Working hours" />
<TimeRangePicker @bind-Value="_shift" Label="Night shift" AllowOvernight HelperText="22:00 to 06:00 is allowed" />
<span>Hours: @Show(_hours)</span>
@code {
private TimeRange _hours = new(new TimeSpan(9, 0, 0), new TimeSpan(17, 30, 0));
private TimeRange _shift = new(new TimeSpan(22, 0, 0), new TimeSpan(6, 0, 0));
private static string Show(TimeRange range) => $"{range.Start:hh\\:mm} - {range.End:hh\\:mm}";
}Un breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.
Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.