Flatpickr: простой модуль календаря для вашего приложения на React

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

npm i flatpickr

Далее вам нужно будет импортировать его в конкретный компонент React, в котором он будет использоваться. В нашем случае это страница бронирования посещений. Этот процесс состоит из двух шагов, первый - импорт самого Flatpickr. Вторым шагом будет импорт конкретного предварительно созданного стиля для вашего календаря, что делает его таким полезным и динамичным инструментом. Вы, конечно, можете отредактировать его самостоятельно (мы изменили шрифт), но встроенные опции очень обширны и доступны на сайте.

На этом этапе вы можете добавить Flatpickr в свое React-приложение.

Позвольте мне объяснить несколько основных настроек конфигурации:

dateFormat - строка символов, которая используется для определения того, как дата будет отформатирована в поле ввода (input value).

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

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

enableTime позволяет пользователям вводить время вместе с выбором даты.

В Flatpickr есть еще много интересного, и я надеюсь, что это знакомство с его основами позволит вам изучить некоторые из его удивительных возможностей. 

Ссылка на сайт Flatpickr: https://flatpickr.js.org/

Github проекта: https://github.com/ScarlettEller1715/Grand-Budapest-Hotel