Date Picker

A controlled calendar popover for selecting dates. Opens inline above or below the trigger button and closes on selection.

Selected: none

Installation

npm install @bloomkit/react

Usage

import { useState } from "react";
import { DatePicker } from "@bloomkit/react";
 
export function MyForm() {
  const [date, setDate] = useState<Date | undefined>(undefined);
 
  return (
    <DatePicker
      value={date}
      onChange={(d) => setDate(d)}
      placeholder="Select date"
    />
  );
}

Controlled value

The DatePicker is fully controlled — pass value and onChange to manage the selected date externally:

const [startDate, setStartDate] = useState<Date | undefined>(undefined);
 
<DatePicker
  value={startDate}
  onChange={setStartDate}
  placeholder="Start date"
/>

Props

Prop	Type	Default	Description
value	Date	—	The currently selected date (controlled)
onChange	(date: Date) => void	—	Called when the user selects a date
placeholder	string	"Select date"	Text shown in the trigger button when no date is selected
className	string	""	Additional Tailwind classes applied to the trigger button