Работа с датами в пользовательских интерфейсах почти всегда требует введения ограничений. Пользователю может быть разрешено выбирать даты только в будущем, только в пределах определённого периода, либо исключая конкретные дни. В интерфейсах календарей, date picker-ов и полей ввода дат такие ограничения играют важную роль в обеспечении корректности данных.
Библиотека React Aria предоставляет встроенные механизмы для задания ограничений при выборе дат. Эти механизмы интегрированы с компонентами календарей, диапазонов дат и полей ввода, а также учитывают требования доступности (ARIA), навигацию с клавиатуры и корректную работу скринридеров.
Ограничения могут задаваться несколькими способами:
Все эти возможности используются в компонентах, построенных на базе хуков React Aria.
Наиболее распространённый тип ограничения — установка минимальной
(minValue) и максимальной (maxValue)
допустимых дат.
Такие ограничения позволяют определить границы, внутри которых пользователь может выбирать дату.
import {useDatePickerState} from 'react-stately';
import {useDatePicker} from 'react-aria';
import {parseDate} from '@internationalized/date';
let state = useDatePickerState({
minValue: parseDate('2024-01-01'),
maxValue: parseDate('2024-12-31')
});В этом примере:
React Aria автоматически:
Визуально такие даты обычно отображаются в календаре как отключённые (disabled).
Частый сценарий — запрет выбора дат в прошлом. Например:
Для этого используется текущая дата как минимальное значение.
import {today, getLocalTimeZone} from '@internationalized/date';
let state = useDatePickerState({
minValue: today(getLocalTimeZone())
});В результате:
Функция today() автоматически учитывает:
Это важно для корректной работы международных интерфейсов.
Обратный сценарий — выбор только прошедших дат. Например:
В этом случае текущая дата используется как максимальная.
let state = useDatePickerState({
maxValue: today(getLocalTimeZone())
});Теперь пользователь может выбрать:
Будущие даты становятся недоступными.
Иногда необходимо запретить выбор конкретных дат, например:
Для этого используется функция isDateUnavailable.
let state = useDatePickerState({
isDateUnavailable: (date) => {
return date.day === 13;
}
});В данном случае:
Функция получает объект даты и возвращает:
true — дата недоступнаfalse — дата доступнаОдин из распространённых сценариев — запрет выбора выходных.
let state = useDatePickerState({
isDateUnavailable: (date) => {
let day = date.toDate(getLocalTimeZone()).getDay();
return day === 0 || day === 6;
}
});Здесь:
0 — воскресенье6 — субботаТаким образом:
React Aria поддерживает компоненты выбора диапазона дат. В этом случае ограничения применяются сразу к двум значениям:
import {useDateRangePickerState} from 'react-stately';
let state = useDateRangePickerState({
minValue: parseDate('2024-01-01'),
maxValue: parseDate('2024-12-31')
});Диапазон может находиться только внутри заданных границ.
Если пользователь пытается выбрать дату за пределами диапазона:
Иногда требуется ограничить максимальную длину диапазона. Например:
Это можно реализовать через isDateUnavailable.
let state = useDateRangePickerState({
isDateUnavailable: (date, selectedRange) => {
if (selectedRange?.start) {
let diff = date.compare(selectedRange.start);
return diff > 14;
}
return false;
}
});Здесь:
Иногда ограничения зависят от выбранной даты.
Например:
В таких случаях ограничения вычисляются динамически.
let state = useDateRangePickerState({
isDateUnavailable: (date, selectedRange) => {
if (selectedRange?.start && date.compare(selectedRange.start) < 0) {
return true;
}
return false;
}
});В этом случае:
В календарях React Aria навигация по месяцам также учитывает ограничения.
Если установлены:
minValue
maxValueто:
Например:
minValue: 2024-05-01Пользователь не сможет перейти к:
React Aria использует библиотеку @internationalized/date, которая поддерживает:
Это означает, что ограничения дат работают корректно для:
Все операции сравнения выполняются через методы объектов даты.
date.compare(otherDate)Метод возвращает:
Этот механизм используется для построения логики ограничений.
Когда дата недоступна:
aria-disabledReact Aria автоматически управляет этими состояниями.
Пример разметки:
<td aria-disabled="true">Скринридеры корректно объявляют такие элементы как недоступные.
Если используется текстовое поле ввода даты, ограничения также применяются.
Например:
<DateField
minValue={parseDate('2024-01-01')}
maxValue={parseDate('2024-12-31')}
/>Если пользователь вводит дату вручную:
React Aria:
aria-invalidОграничения можно комбинировать.
Пример:
let state = useDatePickerState({
minValue: today(getLocalTimeZone()),
maxValue: parseDate('2024-12-31'),
isDateUnavailable: (date) => {
let day = date.toDate(getLocalTimeZone()).getDay();
return day === 0;
}
});В этом случае:
React Aria объединяет все ограничения и применяет их одновременно.
Важной особенностью React Aria является корректная интеграция ограничений с механизмами доступности.
При наличии ограничений:
Это позволяет пользователям с ограниченными возможностями корректно взаимодействовать с календарями и полями дат.
Ограничения на даты применяются в различных интерфейсах:
Бронирование
Регистрация
Планирование
Финансовые операции
React Aria предоставляет гибкую систему ограничений, которая позволяет реализовать все эти сценарии без дополнительной сложной логики в компонентах интерфейса.