Date Picker

Form

Calendar-based date selection input with popover display.

Empty dateSelected dateDisabled

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

date-picker.tsx

"use client";

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

export default function DatePickerExample() {
  const [date, setDate] = useState<Date>();
  return (
    <div className="w-full max-w-xs space-y-4">
      <DatePicker
        value={date}
        onChange={setDate}
        placeholder="Choose a due date"
      />
      <DatePicker
        disabled
        onChange={setDate}
        placeholder="Date selection unavailable"
      />
    </div>
  );
}

Usage

Use DatePicker for a single date in a compact popover. Store a Date or undefined. Use Calendar directly for multiple and range selection.

Import

import { DatePicker } from "@dashboardpack/core/components/ui/date-picker";

Available in the included @dashboardpack/core package. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Date Picker props
Prop	Type / Default	Description
value	`Date` Default: —	Selected date.
onChange	`(date: Date \| undefined) => void` Default: required	Receives a selection or cleared value.
placeholder	`string` Default: Pick a date	Trigger text when no date is selected.
disabled	`boolean` Default: false	Prevent opening the picker.

Build with these too

Calendar DateRangePicker