Date Picker

Preview

05/05/2026

Installation

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

Usage

import { DatePicker } from '@/components/ui/datepicker';
import { useState } from 'react';

const [date, setDate] = useState<Date | null>(new Date());

<DatePicker selected={date} onChange={(date) => setDate(date)} />

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

Disabled State

05/05/2026

Normal Border (Non-Rough)

05/05/2026

Props

Prop	Type	Default	Description
selected	Date | null	—	The selected date.
onChange	(date: Date | null) => void	—	Callback when the date 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 picker is disabled.
placeholderText	string	'Pick a date'	Placeholder text for the input.
border	'rough' | 'normal'	'rough'	The border style of the input.
inline	boolean	false	Whether to render the date picker inline.