Date Picker

A popover-based date picker that combines the Calendar component with a trigger button. Displays the selected date in a readable format.

Import

import { DatePicker } from "poyraz-ui/molecules";

Default

Click to open the calendar popover and select a date.

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

<DatePicker
  selected={date}
  onSelect={setDate}
  placeholder="Pick a date"
/>

Pre-selected

Date picker with a default date already selected.

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

<DatePicker selected={date} onSelect={setDate} />