Datе Time Range

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

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

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

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

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

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

Если пользователь выбрал дату начала и окончания, при этом выбрав только время начала, после клика в любом месте вне календаря, календарь закроется, применив выбранные даты и время начала, а время окончания применится по умолчанию - "00:00":

Если пользователь выбрал дату начала и окончания, при этом выбрав только время оокнчания, после клика в любом месте вне календаря, календарь закроется, применив выбранные даты и время окончания, а время начала применится по умолчанию - "00:00":

Если после выбора даты начала и окончания, кликуть в любом месте вне дропдауна с календарем, он закроется, применив во времени значения по умолчанию - 00:00:

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

При этом, при попытке задать время даты окончания (в правом инпуте) меньше или равно времени даты начала (в левом инпуте), время даты начала автоматически сбросится на время по умолчанию - 00:00:

Исключение. При выбранной одной дате и попытке выбрать одинаковое время даты начала и окончания, срабатывает валидация и высвечивается иконка, при наведении на которую, появляется хинт с информацией об ошибке: "Дата и время начала периода не может быть равна дате и времени окончания".

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

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

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

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

Форматы времени

Есть 3 формата времени:

• ЧЧ:MM (Часы : Минуты)

• ЧЧ:MM:СС (Часы : Минуты : Секунды)

• ЧЧ:MM:СС.MСС (Часы : Минуты : Секунды . Милисекунды)