Date picker
Figma
Date Picker — поле для ручного ввода даты или вызова календаря, для выбора даты.
Из чего состоит
  1. Поле дата пикера
  2. Внешний лейбл
  3. Внутренний лейбл
  4. Левая иконка
  5. Текст / Подсказка
  6. Описание под полем
  7. Ошибка
  8. Правая иконка
  9. Элемент календаря
  10. Число/Месяц/Год
  11. Маркер события
  12. Дни месяца
  13. Месяц
  14. Год
  15. Стрелки
  16. Дни недели
  17. Месяцы
  18. Года
  19. Слайдер
Основные
Отключаемые
Редактируемые
Основные свойства
Тема (Theme)
Состояние (State)
Размер (Size)
Вид (View)
Форма (Form)
Отключаемые элементы
👁 Календарь
👁 Внешний лейбл (Outside Label)
👁 Внутренний лейбл (Inside Label)
👁 Текст (Text)
👁 Подсказка (Placeholder)
👁 Левая иконка (Left Icon)
👁 Правая иконка (Right Icon)
👁 Описание (Description)
👁 Ошибка (Error)
Редактируемые элементы
✏️ Внешний лейбл (Outside Label)
✏️ Внутренний лейбл (Inside Label)
✏️ Текст (Text)
✏️ Подсказка (Placeholder)
✏️ Левая иконка (Left Icon)
✏️ Правая иконка (Right Icon)
✏️ Описание (Description)
✏️ Ошибка (Error)
Ошибка
Сообщение об ошибке появляется, когда нарушается валидация. Текст сообщения устанавливается для каждого нарушения. Одновременно может быть выведено несколько сообщений об ошибке. Каждое новое сообщение начинается с новой строки. Состояние Date Picker меняется на “State = Error”.
По ширине контейнера
Input можно растягивать в ширину под внешний контейнер.
Внутренние горизонтальные отступы (View = Underline)
Можно отключать внутренние горизонтальные отступы в Date Picker при выборе view “underline”.
Маска
Date Picker может содержать любую маску.
Выравнивание календаря
Календарь может выравниваться по левому и по правому краю.
Внешний лейбл и описание
Внешний лейбл и описание переносятся на новую строку.
Внутренний лейбл
Внутренний лейбл скрывается в «...» При наведении — тултип.
Плейсхолдер
Плейсхолдер скрываются в «...» При наведении — тултип.
Текст
Текст скрываются в «...» При наведении — тултип.
Два дата пикера
Два Date Picker могут находиться рядом друг с другом и иметь общий функционал — промежуток даты. После выбора значения в первом дата пикере с помощью календаря, запускается выбор значения во втором (открывается календарь).
Выбор прошедшей даты
Пользователь может настраивать выбор прошедшей даты. Если прошедшую дату выбрать нельзя, то все числа до сегодняшней даты становятся Disabled