Neumorphism UI

Date Picker

Use DatePicker for compact date entry that opens a calendar from a field-like button.

Preview

Due date with reset

Choose or clear a constrained due date, reset it to its initial value, and compare a disabled date picker.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/date-picker

Install the shared base once, then add components and their dependencies with the CLI.

Due date with reset

npx shadcn@latest add @neumorphism-ui/date-picker @neumorphism-ui/button
Registry JSON

Usage

Provide a label and connect value and onValueChange. Set localized text, date constraints, and supporting text; decide in your application how a cleared value and form reset behave.

"use client";

import { useState } from "react";
import { DatePicker } from "@/components/ui/date-picker";

export default function Example() {
  const [date, setDate] = useState<Date | undefined>();
  return <DatePicker label="Due date" name="dueDate" value={date} onValueChange={setDate} />;
}

API Reference

A controlled picker. With name set, a hidden input submits a local YYYY-MM-DD date instead of converting through UTC. The example handles form reset by updating parent state.

ComponentPropTypeDefaultDescription
DatePickervalue / onValueChangeDate | undefined / callback—Current date and change callback. The empty value is undefined.
DatePickerlabel / name / describedBystring—Accessible trigger name, form field name and description element ID.
DatePickerdisabledDates / startMonth / endMonthMatcher | Matcher[] / Date—Disabled dates and bounds for month navigation.

Accessibility

  • 01

    Opening focuses the calendar; closing restores trigger focus.

  • 02

    Validate required values in the parent form. Connect errors with invalid and describedBy; a hidden input is not native required-field validation.