Une heure de début et de fin dans un seul champ, chacune écrite dans le format de la langue courante.
Pourquoi c’est utile
- Début et fin ensemble
- Selon la langue
- Un seul champ compact
Où il trouve sa place
- Équipes
- Horaires d’ouverture
- Créneaux de réunion
Exemple
<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 court fragment. Ajoutez @using RayCraft.Blazor.Components à votre page et utilisez un mode de rendu interactif.
Inclus dans RayCraft Free. Des exemples fonctionnels se trouvent dans le dépôt GitHub (MIT); il contient du code d’exemple et de démonstration, pas le code de la bibliothèque.