Ограничения и валидация дат

Компонент DatePicker в Carbon Components Svelte предоставляет расширенные возможности для выбора дат, включая настройку ограничений, диапазонов и правил валидации. Понимание механизмов ограничения и проверки корректности выбранных значений критично для построения надёжных интерфейсов с корректной обработкой дат.

Ограничение выбора дат

DatePicker поддерживает установку минимальной и максимальной даты, что позволяет контролировать допустимый диапазон выбора. Эти свойства задаются через minDate и maxDate и принимают объекты Date или строки в формате ISO.

<DatePicker
  minDate={new Date(2024, 0, 1)}
  maxDate={new Date(2024, 11, 31)}
  value={selectedDate}
/>

Особенности работы с ограничениями:

  • Даты вне диапазона становятся недоступными для выбора в календаре.
  • Попытка программно установить дату вне диапазона не изменяет состояние компонента, если не используется специальная логика обхода.
  • Ограничения применяются как к календарю, так и к вводу вручную, предотвращая ввод недопустимых значений.

Валидация формата и логики даты

DatePicker интегрирован с валидацией формата даты. Основные свойства:

  • pattern — регулярное выражение для проверки текстового ввода.
  • invalid — булево свойство, указывающее на некорректное значение.
  • on:change — событие, позволяющее вручную проверять дату и устанавливать статус invalid.

Пример использования валидации:

let selectedDate = '';
let isInvalid = false;

function validateDate(event) {
  const date = new Date(event.detail.value);
  isInvalid = isNaN(date.getTime());
}

<DatePicker
  value={selectedDate}
  invalid={isInvalid}
  on:change={validateDate}
/>

Ключевые моменты:

  • DatePicker автоматически распознаёт стандартные форматы даты.
  • Событие change предоставляет доступ к текущему значению перед его установкой.
  • Для сложных сценариев можно комбинировать minDate, maxDate и пользовательскую валидацию.

Диапазонные ограничения (DateRangePicker)

Для выбора интервалов используется компонент DateRangePicker. Он обеспечивает:

  • Указание минимальной и максимальной даты.
  • Автоматическое предотвращение выбора конца диапазона раньше начала.
  • Поддержку связанных проверок: например, запрещение диапазона более 30 дней.

Пример:

<DateRangePicker
  startDate={rangeStart}
  endDate={rangeEnd}
  minDate={new Date(2024, 0, 1)}
  maxDate={new Date(2024, 11, 31)}
  on:change={({ detail }) => {
    const start = new Date(detail.startDate);
    const end = new Date(detail.endDate);
    if ((end - start) / (1000 * 60 * 60 * 24) > 30) {
      alert('Диапазон не должен превышать 30 дней');
    }
  }}
/>

Блокировка определённых дней

С помощью excludeDates можно отключать выбор отдельных дат, например, праздников или выходных:

<DatePicker
  value={selectedDate}
  excludeDates={[
    new Date(2024, 0, 1),
    new Date(2024, 11, 25)
  ]}
/>

Особенности:

  • Исключённые даты становятся недоступными в календаре.
  • Ввод вручную этих дат можно проверять через обработчик change.
  • Список может быть динамическим, что удобно для интеграции с серверными календарями событий.

Настройка пользовательских правил валидации

Для сложных требований можно использовать пользовательскую функцию валидации, вызываемую при каждом изменении значения:

function customValidation(date) {
  const day = date.getDay();
  return day !== 0 && day !== 6; // запрещаем выходные
}

<DatePicker
  value={selectedDate}
  invalid={selectedDate && !customValidation(new Date(selectedDate))}
  on:change={(e) => {
    selectedDate = e.detail.value;
    isInvalid = !customValidation(new Date(selectedDate));
  }}
/>
  • Такой подход позволяет создавать гибкие правила, недоступные через стандартные свойства.
  • Можно комбинировать с ограничениями диапазона, исключаемыми датами и форматами.

Управление визуальной индикацией ошибок

  • Свойство invalidText позволяет указать сообщение об ошибке, отображаемое пользователю.
  • С помощью light и disabled можно визуально подсвечивать некорректные или недоступные даты.
  • Обработка focus и blur даёт возможность динамически обновлять статус ошибки.
<DatePicker
  value={selectedDate}
  invalid={isInvalid}
  invalidText="Дата недопустима"
  on:blur={() => isInvalid = !customValidation(new Date(selectedDate))}
/>

Итоговые рекомендации по ограничениям и валидации

  • Всегда сочетать диапазоны, исключения и пользовательскую проверку для комплексной валидации.
  • Использовать события change, blur и focus для точного контроля состояния.
  • Предпочтительно предоставлять визуальные подсказки о допустимых датах и причинах недопустимого ввода.
  • Для диапазонов использовать DateRangePicker с логикой проверки последовательности и максимальной длины интервала.

Эти инструменты Carbon Components Svelte позволяют создавать надёжные и гибкие интерфейсы для работы с датами, учитывая все необходимые ограничения и правила валидации.

Оглавление