DatePicker

A trigger button that opens a calendar popup for selecting a single date, with full keyboard navigation, min/max bounds, and no external date library.

Installation

npx @obi/ui add date-picker

Preview

Select a date

Arrow keys navigate the calendar grid.

Usage

'use client';

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

export default function Example() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <div className="max-w-xs flex flex-col gap-4">
      <DatePicker
        label="Appointment date"
        placeholder="Pick a date"
        value={date}
        onChange={setDate}
        hint="Arrow keys navigate the calendar grid."
      />
      <DatePicker
        label="Disabled"
        value={null}
        onChange={() => {}}
        disabled
      />
    </div>
  );
}

Props

Name	Type	Default	Description
value	Date \| null	undefined	The currently selected date (controlled).
onChange	(date: Date) => void	undefined	Called when the user selects a day.
placeholder	string	'Pick a date'	Text shown when no date is selected.
min	Date	undefined	Earliest selectable date.
max	Date	undefined	Latest selectable date.
disabled	boolean	false	Disables the trigger.
label	string	undefined	Visible label above the trigger.
hint	string	undefined	Helper text below the trigger.
error	string	undefined	Error message; applies error border styling.
className	string	''	Additional classes on the root wrapper.