Date Range

Когда использовать

Используйте Date Range для выбора периода дат.

Описание работы

После активации поля (кликом на форму ввода или кнопку-иконку календаря) пользователь может ввести период с клавиатуры или выбрать во всплывающем меню - компонент Calendar Range, где начало периода левый календарь, окончание периода - правый.

Выбор через всплывающее меню (Calendar Range)

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

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

Дата начала и дата окончания могут быть выбраны пользователем в любом из представленных календарей. При закрытии календаря даты будут автоматически расставлены в логическом порядке:

Редактирование через всплывающее меню (Calendar Range)

Если в календаре был выбран период один день (дата начала равна дате окончания) или два любых других дня, то при выборе новой даты, предыдущий выбор автоматически спадает:

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