💎
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 (presets list)

Was this helpful?

  1. Components
  2. Calendars

Calendar Range

PreviousCalendarNextCalendar Month

Last updated 2 months ago

Was this helpful?

Анатомия

  1. Календарь начала периода

  2. Календарь окончания периода

  3. Выбор месяца и года

  4. Стрелки прокрутки. Меняют содержимое календаря на месяц вперед / назад.

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

  6. Тело календаря

  7. Блок кнопок (опционально). Используется для подтверждения выбора, если выбор периода может вызывать нагрузку на систему

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

Открытие календаря

Может быть вызван через инпут InputLayoutDateRange, ячейку таблицы Date или кнопку фильтра таблицы.

Выбор периода

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

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

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

Редактирование периода

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

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

Calendar Range (presets list)

Calendar Range (presets list) состоит из блока с предзаданными периодами и сдвоенным календарём:

Выбор можно сделать из списка предзаданных вариантов или в календаре.

Если предыдущий предустановленный период был в рамках одного календаря, а следующий выбранный период захватывает больше одного месяца, то календари автоматически перестраиваются. Дата окончания будет показана в правом календаре, а дата начала - в левом.

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

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

🚧