Параметр blurFieldOnSelect

Параметр blurFieldOnSelect в библиотеке Pikaday управляет поведением поля ввода (input) после выбора даты пользователем. Он определяет, будет ли поле терять фокус (blur) сразу после того, как пользователь выбрал значение в календаре.

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

Основное назначение

При выборе даты в календаре Pikaday обычно:

  • записывает выбранное значение в input
  • закрывает календарь (если включён autoClose)
  • оставляет или снимает фокус с поля ввода

blurFieldOnSelect управляет последним шагом — фокусом.

Тип значения

Параметр принимает логическое значение:

blurFieldOnSelect: true | false

Поведение при true

Если blurFieldOnSelect установлен в true, происходит следующее:

  • после выбора даты input теряет фокус
  • срабатывает событие blur на поле ввода
  • виртуальная клавиатура на мобильных устройствах закрывается
  • календарь обычно закрывается (если включён autoClose)

Типичный сценарий

  1. Пользователь открывает календарь
  2. Выбирает дату
  3. Поле ввода теряет фокус автоматически
  4. Фокус переходит на документ или следующий элемент формы

Особенности

  • улучшает поведение на мобильных устройствах
  • предотвращает повторное открытие календаря при случайном фокусе
  • может мешать быстрому вводу нескольких дат подряд

Поведение при false

Если blurFieldOnSelect установлен в false:

  • input сохраняет фокус после выбора даты
  • курсор остаётся в поле ввода
  • пользователь может сразу продолжить ввод или вызвать календарь снова

Типичный сценарий

  1. Открывается календарь
  2. Выбирается дата
  3. Фокус остаётся в input
  4. Возможен быстрый повторный выбор даты или ручная корректировка

Особенности

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

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

Параметр тесно связан с autoClose, который отвечает за закрытие календаря после выбора даты.

autoClose blurFieldOnSelect Поведение
true true календарь закрывается + input теряет фокус
true false календарь закрывается + фокус остаётся
false true календарь остаётся открыт + input теряет фокус
false false календарь открыт + фокус остаётся

Особое внимание требуется к комбинации autoClose: false и blurFieldOnSelect: true, так как пользователь может потерять фокус, но календарь останется активным визуально.

Влияние на пользовательский опыт

Плюсы включения (true)

  • более предсказуемое поведение на мобильных устройствах
  • снижение количества случайных взаимодействий
  • корректное закрытие виртуальной клавиатуры
  • лучшее соответствие стандартным form UX-паттернам

Минусы включения

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

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

Формы бронирования

В системах бронирования (отели, билеты) чаще используется:

blurFieldOnSelect: true

Причина — пользователь обычно выбирает одну дату и переходит дальше.

Диапазон дат

При выборе диапазона (start/end date):

blurFieldOnSelect: false

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

Административные интерфейсы

В интерфейсах управления данными:

blurFieldOnSelect: false

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

Пример конфигурации

var picker = new Pikaday({
    field: document.getElementById('date'),
    blurFieldOnSelect: true,
    autoClose: true
});

Поведение в связке с событиями

При включённом blurFieldOnSelect важно учитывать порядок событий:

  • onSelect
  • change
  • blur
  • close

При true событие blur может сработать сразу после onSelect, что влияет на внешние обработчики формы.

Возможные побочные эффекты

1. Потеря фокуса при кастомной логике

Если приложение зависит от постоянного фокуса input (например, маски ввода), установка true может нарушить поведение.

2. Конфликты с автокомплитом

При интеграции с автокомплитом браузера или сторонними библиотеками:

  • blur может сбрасывать подсказки
  • повторное открытие может происходить неожиданно

3. Поведение на мобильных устройствах

На мобильных браузерах:

  • true закрывает клавиатуру
  • false может оставлять клавиатуру открытой поверх календаря, что ухудшает UX

Рекомендации по выбору значения

  • одиночный выбор даты → true
  • множественные последовательные выборы → false
  • формы с валидацией по вводу → false
  • мобильные формы с простым UX → true

Взаимодействие с кастомными обработчиками

При использовании onSelect часто добавляется дополнительная логика:

onSelect: function(date) {
    // обработка выбранной даты
}

Если blurFieldOnSelect: true, важно учитывать, что:

  • DOM-элемент может уже потерять фокус к моменту выполнения последующих обработчиков
  • некоторые UI-эффекты (подсветка, валидация) могут сбрасываться

Отличия от похожих параметров

  • autoClose — управляет закрытием календаря
  • blurFieldOnSelect — управляет только фокусом input
  • disableInput — блокирует ручной ввод полностью

Эти параметры часто путают, но они относятся к разным уровням поведения компонента.

Оглавление