Date Picker

A date picker built on the native Temporal API — an editable input, a month panel and pointer-anchored popover in one shipped component

Installation

$npx litefy@latest add date-picker
$pnpm dlx litefy@latest add date-picker
$yarn dlx litefy@latest add date-picker
$bun --bun litefy@latest add date-picker

Usage

An editable input plus a month panel — requires the native Temporal API (Chrome 136+, Firefox 139+, Safari 26).

Selected: -

"use client";import { useState } from "react";import { DatePicker } from "@/ui";export default function DatePickerBasicDemo() {  const [date, setDate] = useState<Temporal.PlainDate | null>(null);  return (    <div className="flex flex-col items-center gap-3">      <DatePicker        placeholder="Select or type a date"        firstDayOfWeek={1}        onValueChange={setDate}      />      <p className="text-sm text-muted-foreground">        Selected: {date?.toString() ?? "-"}      </p>    </div>  );}

Disabled

disabled makes both the input and the panel non-interactive.

"use client";

import { DatePicker } from "@/ui";

export default function DatePickerDisabledDemo() {
  return <DatePicker disabled placeholder="Select or type a date" />;
}

API Reference

High-level Components

DatePicker

A controlled-or-uncontrolled date field; the visible month and panel open state are managed internally.

Prop	Type	Default	Description
`value`	`Temporal.PlainDate \| null`	-	Controlled selected date
`defaultValue`	`Temporal.PlainDate \| null`	-	Initial selected date (uncontrolled)
`onValueChange`	`(date: Temporal.PlainDate) => void`	-	Fired when a date is committed — picked from the panel, or `Enter` on a complete typed date
`placeholder`	`string`	`"Select or type a date"`	Input placeholder
`disabled`	`boolean`	-	Disables the input and the panel
`invalid`	`boolean`	-	External invalid state — shows the danger border (also set internally when validation clears the input)
`firstDayOfWeek`	`0 \| 1`	`0`	First day of the calendar week (`0` = Sunday, `1` = Monday)
`isDateDisabled`	`(date: Temporal.PlainDate) => boolean`	-	Predicate disabling calendar dates
`trailing`	`React.ReactNode`	calendar icon	Trailing decoration inside the input
`onKeyDown`	`React.KeyboardEventHandler<HTMLInputElement>`	-	Runs before the built-in `Enter` commit; `preventDefault()` cancels it
`classNames`	`{ input?; trailing?; panel? }` — each `ClassNameValue`	-	Custom classes for the input, its trailing decoration and the calendar panel
`styles`	`{ input?; trailing? }` — each `React.CSSProperties`	-	Inline styles for the input and trailing decoration

While the panel is open, ArrowDown / ArrowUp move focus into the calendar's first / last control; Escape closes it and returns focus to the input.