💎
Prizm Design System Documentation
ShowcaseGitHubRepot a Bug
  • About Prizm
    • Дизайн-система Prizm
    • Changelog
    • License
  • Guidelines
    • ⭕Accessibility
    • ⭕Colors
    • 🚧Design Tokens
      • Color
      • Border Radius
      • Box Shadow
      • Font
      • Line Height
      • Size
      • Space
      • Transition
      • Page
    • ⭕Grid
    • ⭕Iconography
    • ⭕Naming
    • ⭕Typography
    • 🚧Validation
  • Components
    • 🚧Accordion
    • 🚧Breadcrumbs
    • 🚧Buttons
      • Text Button
      • Icon Buttn
      • Split Button
    • 🚧Calendars
      • Calendar
      • Calendar Range
      • ⭕Calendar Month
      • Calendar Year
    • ⭕Card
    • 🚧Checkbox
    • 🚧Chips
    • 🚧Dialogs
      • Confirm dialog
      • Dialog
      • Sidebar
    • ⭕Hierarchy
    • Hint
    • 🚧Indicator
      • 🚧Counter
      • ⭕Point
      • ⭕Icon
    • 🚧Inputs
      • Chips
      • Chips Select
      • Chips Combobox
      • Date
      • Datе Time Range
      • Date Range
    • Navigation menu
    • 🚧Navigation Panel
      • Header
      • Navigation menu
    • 🚧Dropdown Menu
      • Context Menu
      • Dropdown Menu
    • 🚧Paginator
    • 🚧Panel
    • 🚧Progress
      • Bar
      • Spinner
    • 🚧RadioButton
    • 🚧Scrollbar
    • 🚧Shell
    • ⭕Skeleton
    • 🚧Slider
    • 🚧Splitter
    • 🚧Status Panel
    • 🚧Stepper
    • 🚧Switcher
    • ⭕Table
      • Настройки таблицы
    • 🚧Tab
    • Time Picker
    • 🚧Toast
    • 🚧Toggle
    • 🚧Tooltip
    • Tree
      • Tree Chevrone
      • Tree Line
    • 🚧Widget
  • Patterns
    • ⭕403 / 404
    • Query builder
    • ⭕Cron
    • None content
    • ⭕Group Content
    • ⭕File Upload
    • ⭕Side Menu
    • ⭕Zoom Control
Powered by GitBook
On this page
  • Когда использовать
  • Описание работы
  • Выбор через всплывающее меню (Calendar Range)
  • Редактирование через всплывающее меню (Calendar Range)

Was this helpful?

  1. Components
  2. Inputs

Date Range

PreviousDatе Time RangeNextNavigation menu

Last updated 3 months ago

Was this helpful?

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

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

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

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

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

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

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

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

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

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

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

🚧