전체 카탈로그
Data InputDateInput22 props

Date Range Input

DateRangeInput lets users select a start and end date from a dual-month calendar popover. Use it for filtering data by time period, report generation, analytics dashboards, and ...

공식 문서 열기
live previewData Input

Preview

Start and end date selection.

Import

import {DateRangeInput} from '@astryxdesign/core/DateRangeInput';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

DateRangeInput lets users select a start and end date from a dual-month calendar popover. Use it for filtering data by time period, report generation, analytics dashboards, and ...

daterangepickerdaterangerangecalendarfilteranalyticsperiodschedule

Important props

valueDateRange | nullrequired
onChange(value: DateRange | null) => voidrequired
changeAction(value: DateRange | null) => void | Promise<void>optional
sizesm | md | lgoptional

Theming targets

astryx-date-range-input

Best practices

  • DoUse presets for common ranges like "Last 7 days" to speed up selection.
  • DoUse min/max to constrain selectable dates to valid ranges.
  • DoKeep hasClear enabled (default) so users can reset the filter.
  • DoProvide clear labels and descriptions so users understand what the range controls.