DateRangePicker
Capture dates range from user
Import
Source
Docs
Package
Usage
import { useState } from 'react';import dayjs from 'dayjs';import { DateRangePicker } from '@mantine/dates';function Demo() {const [value, setValue] = useState<[Date, Date]>([dayjs(new Date()).startOf('month').toDate(),dayjs(new Date()).startOf('month').add(4, 'days').toDate(),]);return (<DateRangePickerlabel="Book hotel"placeholder="Pick dates range"value={value}onChange={setValue}/>);}
DatePicker props
DateRangePicker component uses the same props as DatePicker component.
The only difference is in value and onChange props shown in previous example.
Server side rendering
Component uses use-id hook to generate unique ids and aria- attributes,
provide static id prop to prevent props mismatch:
<DateRangePicker /> // -> random id generated both on client and server, props mismatch warning<DateRangePicker id="my-date-range" /> // -> id is static, no mismatches
Accessibility and usability
To make all component controls visible to screen reader set following props:
// When withSelect prop set to false<DateRangePickerwithSelect={false}nextMonthLabel="Next month" // -> aria-label for button that switches to next monthpreviousMonthLabel="Previous month" // -> aria-label for button that switches to previous month/>// When withSelect prop set to true<DateRangePickerwithSelectnextMonthLabel="Next month" // -> aria-label for button that switches to next monthpreviousMonthLabel="Previous month" // -> aria-label for button that switches to previous monthyearLabel="Select year" // -> year select aria-labelmonthLabel="Select month" // -> month select aria-label/>
Built by Vitaly Rtishchev and these awesome people