K

DateRangePicker

Capture dates range from user
Import

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 (
<DateRangePicker
label="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
<DateRangePicker
withSelect={false}
nextMonthLabel="Next month" // -> aria-label for button that switches to next month
previousMonthLabel="Previous month" // -> aria-label for button that switches to previous month
/>
// When withSelect prop set to true
<DateRangePicker
withSelect
nextMonthLabel="Next month" // -> aria-label for button that switches to next month
previousMonthLabel="Previous month" // -> aria-label for button that switches to previous month
yearLabel="Select year" // -> year select aria-label
monthLabel="Select month" // -> month select aria-label
/>
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback