Date Range Picker

Preview

05/05/2026 -

Installation

pnpm add react-datepicker date-fns
npx skeci-ui add date-range-picker

Usage

import { DateRangePicker } from '@/components/ui/date-range-picker';
import { useState } from 'react';

const [startDate, setStartDate] = useState<Date | null>(new Date());
const [endDate, setEndDate] = useState<Date | null>(null);

const onChange = (dates: [Date | null, Date | null]) => {
  const [start, end] = dates;
  setStartDate(start);
  setEndDate(end);
};

<DateRangePicker
  startDate={startDate}
  endDate={endDate}
  onChange={onChange}
/>

Variants

Inline Mode

Previous MonthNext Month

May 2026

SundaySu

MondayMo

TuesdayTu

WednesdayWe

ThursdayTh

FridayFr

SaturdaySa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Props

Prop	Type	Default	Description
startDate	Date | null	—	The start date of the range.
endDate	Date | null	—	The end date of the range.
onChange	(dates: [Date | null, Date | null]) => void	—	Callback when the range changes.
minDate	Date	—	The minimum date that can be selected.
maxDate	Date	—	The maximum date that can be selected.
disabled	boolean	false	Whether the date range picker is disabled.
placeholderText	string	'Pick a date range'	Placeholder text for the input.
border	'rough' | 'normal'	'rough'	The border style of the input.
inline	boolean	false	Whether to render the date range picker inline.