Skip to content
  • Getting Started
  • Styled System
  • Components
  • Hooks
  • Figma
  • Community
  • Playground

Layout

Aspect Ratio
Box
Center
Container
Flex
Grid
SimpleGrid
Stack
Wrap

Forms

Button
ChakraReactSelect
Checkbox
DatePicker
DateTimeRangePicker
Editable
Form Control
Icon Button
Input
Number Input
Pin Input
Radio
Range Slider
Select
Slider
Switch
Textarea
TimePicker

Data Display

Badge
Card
Code
Divider
Kbd
List
Responsive Table
Stat
Table
Tag

Feedback

Alert
Circular Progress
Progress
Skeleton
Spinner
Toast

Typography

Text
Heading
Highlight

Overlay

Alert Dialog
Drawer
Menu
Modal
Popover
Tooltip

Disclosure

Accordion
Tabs
Visually Hidden

Navigation

Breadcrumb
Link
LinkOverlay
Pagination
SkipNav
StepperNew

Media and icons

Avatar
Icon
Image

Other

Close Button
Portal
Show / Hide
Transitions

  • Usage
  • Props
  • Theming

Props#

DateTimeRangePicker composes the react-dates component:

export interface UseDtrpProps {
endDate: Moment | null;
endTime: number;
maxHours: number;
onEndDateChange: (date: Moment | null) => void;
onEndTimeChange: (time: number) => void;
onStartDateChange: (date: Moment | null) => void;
onStartTimeChange: (time: number) => void;
reservations?: Types.Reservations;
startDate: Moment | null;
startTime: number;
}
type ViewProps = Pick<
DateRangePickerShape,
'startDatePlaceholderText' | 'endDatePlaceholderText' | 'displayFormat',
> & { labels: { end?: string, start?: string } }
type DateTimeRangePickerProps = UseDtrpProps & ViewProps

On this page