Docs/DatePicker

DatePicker

Input field with calendar popover. Client component.

Usage

tsx

1'use client'
2import { useState } from 'react'
3import { DatePicker } from '@storm-ds/ui'
4
5function MyDatePicker() {
6  const [date, setDate] = useState<Date | undefined>()
7  return (
8    <DatePicker
9      value={date}
10      onChange={setDate}
11      placeholder="Pick a date"
12    />
13  )
14}

Default

Pick a date

tsx

1'use client'
2import { useState } from 'react'
3import { DatePicker } from '@storm-ds/ui'
4
5function DatePickerDemo() {
6  const [date, setDate] = useState<Date | undefined>()
7  return <DatePicker value={date} onChange={setDate} />
8}

With Range

Select a date (2025 only)

tsx

1<DatePicker
2  value={date}
3  onChange={setDate}
4  min={new Date(2024, 0, 1)}
5  max={new Date(2024, 11, 31)}
6  placeholder="Choose from 2024"
7/>

Disabled

tsx

1<DatePicker
2  value={date}
3  onChange={setDate}
4  disabled
5  placeholder="Unavailable"
6/>

Note

Input triggers popover with Calendar. Shows formatted date in input. Supports min/max/disabled props passed to calendar.

Props

Prop	Type	Default	Description
value	Date \| undefined	-	Selected date
onChange	(date: Date \| undefined) => void	-	Called when a date is selected
placeholder	string	'Pick a date'	Input placeholder text
min	Date	-	Earliest selectable date
max	Date	-	Latest selectable date
disabled	boolean	false	Disables the picker
className	string	-	Custom classes

Use with AI

Create a Next.js client component using Storm UI's DatePicker. Import: `import { DatePicker } from '@storm-ds/ui'`. Use 'use client' and useState. Shows an input field that opens a Calendar popover when clicked. Pass value (Date | undefined) and onChange callback. Optional placeholder, min, max, disabled props. Displays selected date formatted in the input field. Example: `const [date, setDate] = useState(); <DatePicker value={date} onChange={setDate} placeholder="Select date" min={new Date(2024, 0, 1)} max={new Date(2024, 11, 31)} />`

Combobox

InputOTP