DatePicker

Calendar-based date selection input with optional range and time support.

Examples

A simple native date input.

Date picker paired with a label.

Appointment date

Select a date within the next 30 days.

A date picker in disabled state.

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { DatePicker } from "@rokle/components";

import { DatePicker } from "@rokle/components";

export function Example() {
  return <DatePicker />;
}

Prop	Type	Default	Description
value	Date \| null	-	Currently selected date.
onValueChange	(date: Date \| null) => void	-	Called when date changes.
minDate	Date	-	Earliest selectable date.
maxDate	Date	-	Latest selectable date.