Към съдържанието
ДАТА И ЧАС · FREE

TimeRangePicker

Изберете начален и краен час в едно поле.

Начален и краен час в едно поле, всеки записан във формата на текущия език.

Защо помага

  • Начало и край заедно
  • Съобразен с езика
  • Едно компактно поле

Къде пасва

  • Смени
  • Работно време
  • Слотове за срещи
Контролата TimeRangePicker в страница на RayCraft

Пример

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

Кратък фрагмент. Добавете @using RayCraft.Blazor.Components към страницата си и ползвайте интерактивен режим на рендиране.

Включено в RayCraft Free. Работещи примери има в хранилище в GitHub (MIT); то съдържа примерен и демонстрационен код, не кода на библиотеката.

Всички контроли ยท Документация