Параметр noCalendar

Параметр noCalendar в Flatpickr управляет отображением календарной сетки выбора дат. При его включении календарь полностью скрывается, а компонент переключается в режим работы только со временем (time picker), если активирован enableTime. В противном случае поле превращается в упрощённый инпут без визуального календаря, фактически ограничиваясь текстовым вводом или минимальным UI в зависимости от конфигурации.

Основная роль noCalendar заключается в разделении сценариев выбора даты и времени, когда календарная логика не требуется и интерфейс должен быть компактным.

Базовое поведение

При стандартной инициализации Flatpickr отображает календарь выбора даты:

flatpickr("#input", {
  dateFormat: "Y-m-d"
});

Добавление noCalendar: true изменяет поведение компонента:

flatpickr("#input", {
  noCalendar: true,
  enableTime: true,
  dateFormat: "H:i"
});

В этом режиме календарная сетка не создаётся, а интерфейс ограничивается выбором времени.

Взаимодействие с enableTime

noCalendar практически всегда используется совместно с enableTime. Их комбинация формирует классический time picker:

flatpickr("#timeInput", {
  noCalendar: true,
  enableTime: true,
  time_24hr: true,
  dateFormat: "H:i"
});

Ключевое поведение:

  • enableTime: true активирует выбор времени
  • noCalendar: true убирает календарь
  • итоговый UI становится специализированным временным селектором

Если enableTime не включён, noCalendar приводит к упрощённому состоянию без календаря и без полноценного time UI, что может выглядеть как обычное текстовое поле с форматированием.

Форматирование значения (dateFormat)

При использовании noCalendar критическое значение приобретает dateFormat. Он определяет, какие данные сохраняются и как интерпретируется ввод.

Примеры:

flatpickr("#time1", {
  noCalendar: true,
  enableTime: true,
  dateFormat: "H:i"
});
flatpickr("#time2", {
  noCalendar: true,
  enableTime: true,
  dateFormat: "H:i:S"
});

Использование даты в формате (Y-m-d) при активном noCalendar становится логически избыточным, так как дата не выбирается через интерфейс. Однако Flatpickr продолжает хранить внутреннюю дату (обычно текущую или заданную через defaultDate), что может приводить к скрытым значениям даты при сериализации.

Влияние на внутреннюю модель данных

Несмотря на отсутствие календаря, Flatpickr продолжает оперировать объектом Date. Это означает:

  • дата всё равно существует в состоянии компонента
  • изменяется только UI-представление
  • при необходимости может сохраняться дата по умолчанию (например, сегодняшний день)

Пример:

flatpickr("#time", {
  noCalendar: true,
  enableTime: true,
  defaultDate: new Date(2026, 0, 1, 14, 30),
  dateFormat: "H:i"
});

В этом случае дата 2026-01-01 остаётся частью объекта, но не отображается пользователю.

Использование с defaultDate

defaultDate особенно важен при отключённом календаре, так как он определяет стартовое значение времени:

flatpickr("#meetingTime", {
  noCalendar: true,
  enableTime: true,
  defaultDate: "12:00",
  dateFormat: "H:i"
});

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

  • строка интерпретируется как время
  • при наличии даты в строке дата игнорируется, если календарь отключён
  • значение нормализуется к внутреннему Date объекту

Форматы 12/24 часа

При работе в режиме noCalendar часто используется управление форматом времени через time_24hr:

flatpickr("#time", {
  noCalendar: true,
  enableTime: true,
  time_24hr: false,
  dateFormat: "h:i K"
});

Поведение:

  • h:i K включает 12-часовой формат с AM/PM
  • H:i используется для 24-часового формата
  • time_24hr влияет на отображение и парсинг

Ограничения и особенности парсинга

При активном noCalendar проявляются специфические особенности:

  1. Игнорирование даты при вводе

    • строки с датой могут парситься, но UI их не использует

  2. Зависимость от dateFormat

    • неправильный формат приводит к некорректной интерпретации времени

  3. Скрытая дата

    • внутренняя модель может содержать дату, не отражённую в интерфейсе

  4. Совместимость с altInput

    • альтернативное поле отображает только форматированное значение времени

Сочетание с altInput и altFormat

При использовании альтернативного поля важно синхронизировать отображаемое значение:

flatpickr("#time", {
  noCalendar: true,
  enableTime: true,
  altInput: true,
  altFormat: "H:i",
  dateFormat: "H:i"
});

В таком режиме:

  • оригинальное поле хранит значение
  • altInput отображает форматированное время
  • календарная часть отсутствует полностью

Использование в интерфейсах выбора времени

noCalendar часто применяется в следующих сценариях:

  • выбор времени записи (расписания)
  • установка времени уведомлений
  • настройка интервалов (например, начало/конец события)
  • формы бронирования

Типичный пример конфигурации для расписаний:

flatpickr(".time-picker", {
  noCalendar: true,
  enableTime: true,
  time_24hr: true,
  minuteIncrement: 5,
  dateFormat: "H:i"
});

Взаимодействие с minDate и maxDate

Даже при отключённом календаре можно ограничивать диапазон времени:

flatpickr("#time", {
  noCalendar: true,
  enableTime: true,
  minDate: "09:00",
  maxDate: "18:00",
  dateFormat: "H:i"
});

В этом режиме:

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

Поведение при пустом значении

При отсутствии defaultDate и значении в инпуте:

  • компонент инициализируется без выбранного времени
  • отображение зависит от placeholder или altInput
  • внутренний Date может быть null до первого выбора

Совместимость с локалями и форматированием

При noCalendar локаль влияет только на временные элементы:

  • названия AM/PM (если применимо)
  • форматирование времени
  • разделители

Календарные локализационные настройки (месяцы, дни недели) становятся неактуальными, так как UI календаря отсутствует.

Практическая модель поведения

Комбинация параметров формирует несколько типовых режимов:

  1. Полноценный date picker

    • noCalendar: false
    • enableTime: false

  2. Дата + время

    • noCalendar: false
    • enableTime: true

  3. Чистый time picker

    • noCalendar: true
    • enableTime: true

  4. Упрощённое поле без календаря и времени

    • noCalendar: true
    • enableTime: false
Оглавление