Работа с формами и пользовательским вводом

Работа с формами, содержащими даты и время, требует строгого контроля над форматом входных данных. Пользовательский ввод почти всегда нестабилен: строки могут приходить в разных локалях, с разными разделителями, неполными значениями или ошибками.

Библиотека Day.js предоставляет компактный и предсказуемый инструмент для нормализации таких значений.

Основная задача при обработке ввода — преобразовать строку в валидный объект даты:

import dayjs from 'dayjs';

const input = '2026-05-23';
const date = dayjs(input);

console.log(date.isValid()); // true

При работе с формами важно не полагаться на автоматическое распознавание формата. Day.js корректно интерпретирует только ISO-форматы без дополнительной настройки. Для остальных случаев используется строгий парсинг через plugin customParseFormat.

Строгая валидация форматов ввода

Пользовательские формы часто принимают даты в виде DD.MM.YYYY, MM/DD/YYYY или смешанных вариантов. Без строгого режима такие строки могут интерпретироваться неверно.

Подключение строгого парсинга:

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);

Пример проверки ввода:

const input = '23.05.2026';

const date = dayjs(input, 'DD.MM.YYYY', true);

console.log(date.isValid()); // true

Флаг true включает строгий режим, при котором несоответствие формату приводит к невалидной дате.

Обработка множественных форматов ввода

Формы часто допускают несколько допустимых форматов. Day.js позволяет передавать массив шаблонов:

const input = '05/23/2026';

const date = dayjs(input, ['DD.MM.YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD'], true);

console.log(date.isValid());

Такой подход уменьшает необходимость предварительной нормализации строки.

Нормализация данных перед отправкой

Перед отправкой данных на сервер даты должны быть приведены к единому формату. Наиболее устойчивым считается ISO 8601.

const input = '23.05.2026';
const date = dayjs(input, 'DD.MM.YYYY', true);

const payload = {
  createdAt: date.toISOString()
};

Метод toISOString() гарантирует единый формат независимо от локали пользователя.

Работа с частичными данными формы

Пользовательские формы часто содержат неполные даты: только год, только месяц или комбинации без времени. Day.js позволяет собирать такие значения через последовательное уточнение.

const year = '2026';
const month = '05';
const day = '23';

const date = dayjs(`${year}-${month}-${day}`);

console.log(date.format('YYYY-MM-DD'));

При отсутствии компонентов важно контролировать валидность результата:

if (!date.isValid()) {
  // обработка ошибки ввода
}

Интеграция с input[type=“date”] и input[type=“datetime-local”]

Нативные HTML-поля возвращают значения в стандартизированном формате.

<input type="date" id="dateInput">
const value = document.getElementById('dateInput').value;

const date = dayjs(value);

Для datetime-local формат включает локальное время без временной зоны:

const value = '2026-05-23T14:30';

const date = dayjs(value);

При необходимости приведения к UTC используется плагин utc.

Работа с временными зонами в формах

Формы, собирающие время, часто приводят к ошибкам при передаче между клиентом и сервером из-за различий временных зон.

Подключение UTC-плагина:

import utc from 'dayjs/plugin/utc';

dayjs.extend(utc);

Преобразование ввода:

const input = '2026-05-23T14:30';

const date = dayjs(input).utc();

console.log(date.format());

Такой подход устраняет неоднозначность локального времени.

Валидация диапазонов дат

Формы часто требуют ограничения: дата рождения, бронирование, сроки выполнения.

const input = '2026-05-23';
const date = dayjs(input);

const min = dayjs('2020-01-01');
const max = dayjs('2030-01-01');

const isValidRange = date.isAfter(min) && date.isBefore(max);

Диапазонная проверка должна выполняться после базовой валидации формата.

Обработка ошибок ввода и fallback-логика

Неверный ввод необходимо обрабатывать без исключений. Day.js не выбрасывает ошибки, но возвращает невалидный объект.

const input = 'invalid-date';

const date = dayjs(input);

const safeDate = date.isValid()
  ? date.format('YYYY-MM-DD')
  : null;

Fallback-значения позволяют избежать попадания некорректных данных в бизнес-логику.

Форматирование отображения данных в UI

После нормализации даты часто требуется вывод в пользовательском интерфейсе в локальном формате.

const input = '2026-05-23';
const date = dayjs(input);

const formatted = date.format('DD MMMM YYYY');

С локалями:

import 'dayjs/locale/ru';

dayjs.locale('ru');

const formatted = dayjs('2026-05-23').format('DD MMMM YYYY');

Обработка относительных значений в формах

В некоторых интерфейсах ввод может быть задан относительно текущего времени: «через 3 дня», «2 недели назад».

Подключение relativeTime:

import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

Пример вычисления:

const date = dayjs('2026-05-25');

console.log(date.fromNow());

Такой вывод часто используется для подсказок в UI рядом с полями формы.

Синхронизация нескольких полей даты и времени

Раздельные поля формы (дата + время) требуют объединения значений:

const datePart = '2026-05-23';
const timePart = '14:30';

const dateTime = dayjs(`${datePart}T${timePart}`);

console.log(dateTime.format());

При изменении одного поля необходимо пересобирать итоговое значение, сохраняя целостность объекта даты.

Защита от некорректного пользовательского ввода

Основные источники проблем:

  • неверный порядок компонентов даты
  • использование локальных разделителей
  • пустые строки
  • частично заполненные поля

Устойчивый шаблон обработки:

function parseFormDate(value) {
  const date = dayjs(value, ['YYYY-MM-DD', 'DD.MM.YYYY'], true);

  if (!date.isValid()) {
    return null;
  }

  return date;
}

Такой подход централизует логику и упрощает поддержку форм.

Использование кастомных форматов для бизнес-логики

В сложных формах часто требуется фиксированный формат, не совпадающий с отображением.

const input = '23.05.2026';

const date = dayjs(input, 'DD.MM.YYYY', true);

const businessFormat = date.format('YYYYMMDD');

Формат YYYYMMDD удобен для сортировки и хранения в строковом виде.

Обработка временных полей с шагом (time step)

При вводе времени с шагом (например, каждые 15 минут) важно нормализовать минуты:

const input = '14:37';

const date = dayjs(`2026-05-23T${input}`);

const roundedMinutes = Math.round(date.minute() / 15) * 15;

const normalized = date.minute(roundedMinutes).second(0);

Такая нормализация обеспечивает согласованность данных при сохранении.

Контроль минимальных требований к заполнению формы

Валидация обязательных дат:

const input = '';

const date = dayjs(input);

const isFilled = input.trim().length > 0 && date.isValid();

Разделение проверки строки и проверки даты снижает риск ложных срабатываний.

Подготовка данных формы для API

Перед отправкой данные должны быть приведены к стабильному контракту:

function preparePayload(form) {
  const date = dayjs(form.date, 'YYYY-MM-DD', true);

  return {
    name: form.name,
    date: date.isValid() ? date.toISOString() : null
  };
}

Серверная сторона получает предсказуемый формат независимо от источника ввода.

Оглавление