FORMS · COMPONENT

Date picker

An interactive calendar for choosing a single date.

@raydenui/ui 0.10.1React + TypeScript

Loading the real component…

"use client";
import { useState } from "react";
import { DatePicker } from "@raydenui/ui";
import "@raydenui/ui/styles.css";

export default function Example() {
  const [date, setDate] = useState<Date | null>(new Date(2026, 8, 24));
  return <div style={{ width: "min(100%, 360px)" }}>
    <DatePicker value={date} onChange={setDate} showFooter onClear={() => setDate(null)} />
    <p role="status" style={{ marginTop: 24 }}>Selected: {date ? date.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" }) : "No date"}</p>
  </div>;
}

Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.

Made for real interfaces.

A controlled DatePicker starts on a fixed demo date and reports the selected day. The package also documents range and year modes; this example focuses on a single-date interaction.

Try it

Choose another day, move between months, or clear the selection. The text below reports the selected date.

Date picker

Made for real interfaces.

Try it

A few more possibilities.