Hopp til innholdet
DATO OG TID · FREE

TimeRangePicker

Velg et start- og sluttidspunkt i ett felt.

Et start- og et sluttidspunkt i ett felt, hvert skrevet i formatet for gjeldende språk.

Hvorfor det hjelper

  • Start og slutt sammen
  • Følger språket
  • Ett kompakt felt

Hvor det passer

  • Skift
  • Åpningstider
  • Møtetider
Kontrollen TimeRangePicker på en RayCraft-side

Eksempel

<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}";
}

Et kort utdrag. Legg til @using RayCraft.Blazor.Components på siden din, og bruk en interaktiv gjengivelsesmodus.

Inkludert i RayCraft Free. Fungerende eksempler finnes i GitHub-arkiv (MIT); det inneholder eksempel- og demokode, ikke bibliotekets kode.

Alle kontroller ยท Dokumentasjon