Параметры конструктора

Конструктор Pikaday принимает объект конфигурации, через который определяется поведение календаря, его привязка к DOM-элементам, формат отображения дат и логика взаимодействия с пользователем. Практически все возможности библиотеки задаются именно через этот объект, что делает настройку предсказуемой и централизованной.

Ключевым параметром выступает field, определяющий input-элемент, с которым связывается календарь. Это точка входа, через которую пользователь взаимодействует с датами.

new Pikaday({
  field: document.querySelector('#date')
});

Без указания field календарь не сможет синхронизировать выбранную дату с формой ввода.

Параметр trigger используется, когда открытие календаря должно происходить не при фокусе на поле ввода, а при клике по отдельному элементу.

new Pikaday({
  field: document.querySelector('#date'),
  trigger: document.querySelector('#calendar-btn')
});

Флаг bound управляет поведением отображения календаря относительно поля. При значении true (по умолчанию) календарь позиционируется относительно field. При false он может быть вставлен в контейнер отдельно.

Управление позицией и рендерингом

Параметр position задаёт предпочтительное расположение календаря относительно input-элемента. Допустимые значения: top, bottom, left, right.

new Pikaday({
  field: document.querySelector('#date'),
  position: 'top'
});

Параметр reposition определяет, будет ли календарь автоматически менять позицию, если не помещается в пределах окна браузера. При значении true (по умолчанию) библиотека пытается избежать выхода за границы viewport.

container позволяет задать DOM-элемент, в который будет рендериться календарь. Это важно при интеграции в сложные интерфейсы или модальные окна.

new Pikaday({
  field: document.querySelector('#date'),
  container: document.querySelector('#calendar-wrapper')
});

Формат отображения и работа с датами

format определяет строковый формат даты, который будет отображаться в input. По умолчанию используется формат YYYY-MM-DD.

new Pikaday({
  field: document.querySelector('#date'),
  format: 'DD.MM.YYYY'
});

Для более гибкого управления преобразованием даты используются функции toString и parse.

toString отвечает за преобразование объекта Date в строку:

new Pikaday({
  field: document.querySelector('#date'),
  toString(date) {
    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();
    return `${day}.${month}.${year}`;
  }
});

parse выполняет обратное преобразование строки в объект Date:

new Pikaday({
  field: document.querySelector('#date'),
  parse(dateString) {
    const [day, month, year] = dateString.split('.');
    return new Date(year, month - 1, day);
  }
});

Использование этих функций полностью заменяет стандартный format и даёт полный контроль над сериализацией дат.

Значения по умолчанию и начальное состояние

Параметр defaultDate задаёт дату, которая будет выбрана при инициализации календаря, если поле ввода пустое.

new Pikaday({
  field: document.querySelector('#date'),
  defaultDate: new Date(2026, 0, 1)
});

Флаг setDefaultDate определяет, будет ли значение defaultDate автоматически записано в input при создании экземпляра. При true поле сразу получает значение, при false календарь лишь использует его внутренне.

new Pikaday({
  field: document.querySelector('#date'),
  defaultDate: new Date(),
  setDefaultDate: true
});

Ограничения диапазона дат

minDate и maxDate задают допустимый диапазон выбора.

new Pikaday({
  field: document.querySelector('#date'),
  minDate: new Date(2025, 0, 1),
  maxDate: new Date(2026, 11, 31)
});

Эти параметры влияют на интерактивность календаря: даты вне диапазона становятся недоступными для выбора.

Навигация по годам и месяцам

yearRange управляет диапазоном лет, отображаемых в селекторе годов. Он может задаваться числом или массивом.

new Pikaday({
  field: document.querySelector('#date'),
  yearRange: [1990, 2030]
});

Также допустен сокращённый вариант:

yearRange: 10

В этом случае библиотека рассчитывает диапазон относительно текущего года.

firstDay задаёт первый день недели. Значение 0 соответствует воскресенью, 1 — понедельнику.

new Pikaday({
  field: document.querySelector('#date'),
  firstDay: 1
});

Локализация интерфейса

Параметр i18n позволяет полностью локализовать текстовые элементы календаря: названия месяцев, дней недели и кнопки навигации.

new Pikaday({
  field: document.querySelector('#date'),
  i18n: {
    previousMonth: 'Предыдущий месяц',
    nextMonth: 'Следующий месяц',
    months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
    weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
    weekdaysShort: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']
  }
});

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

Отображение сетки календаря

numberOfMonths определяет количество месяцев, отображаемых одновременно. Значение больше 1 полезно для выбора диапазонов дат.

new Pikaday({
  field: document.querySelector('#date'),
  numberOfMonths: 2
});

Параметр showDaysInNextAndPreviousMonths управляет отображением «чужих» дней (из соседних месяцев) в текущей сетке.

new Pikaday({
  field: document.querySelector('#date'),
  showDaysInNextAndPreviousMonths: true
});

Управление доступностью дат

disableWeekends отключает выбор выходных дней:

new Pikaday({
  field: document.querySelector('#date'),
  disableWeekends: true
});

Более гибкий контроль обеспечивает disableDayFn, принимающий функцию, которая возвращает true для недоступных дат.

new Pikaday({
  field: document.querySelector('#date'),
  disableDayFn(date) {
    return date.getDay() === 0; // отключение воскресений
  }
});

Также часто используется disableDateFn, аналогичный по смыслу, но применяемый в более ранних версиях некоторых сборок.

Обработка событий жизненного цикла

onSelect вызывается при выборе даты:

new Pikaday({
  field: document.querySelector('#date'),
  onSelect(date) {
    console.log('Выбрана дата:', date);
  }
});

onOpen срабатывает при открытии календаря, onClose — при закрытии.

new Pikaday({
  field: document.querySelector('#date'),
  onOpen() {
    console.log('Календарь открыт');
  },
  onClose() {
    console.log('Календарь закрыт');
  }
});

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

new Pikaday({
  field: document.querySelector('#date'),
  onDraw() {
    console.log('Календарь перерисован');
  }
});

Поведение клавиатуры и взаимодействие

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

new Pikaday({
  field: document.querySelector('#date'),
  keyboardInput: false
});

Это часто используется для предотвращения некорректного ручного ввода.

Визуальная кастомизация

theme добавляет CSS-класс к контейнеру календаря, позволяя применять собственные стили.

new Pikaday({
  field: document.querySelector('#date'),
  theme: 'dark-theme'
});

С помощью этого параметра достигается изоляция визуальных тем без модификации исходного кода библиотеки.

Дополнительные параметры поведения

reposition уже упоминался как механизм автоматического перемещения календаря, но в связке с bound он формирует общую стратегию отображения.

blurFieldOnSelect (в некоторых сборках) управляет потерей фокуса input после выбора даты, что влияет на UX в формах.

new Pikaday({
  field: document.querySelector('#date'),
  blurFieldOnSelect: true
});

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

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

Оглавление