Primitives

Date Picker

Date field composing a Button trigger, Popover, and Calendar.

ControlledNothing picked yet

Uncontrolled + preset

Composition

The preferred shape for composing the installed primitive from its exported parts.

Root

Single-slot surface with no nested parts.

DatePicker

The refined source installs this primitive from src/registry/sources/refined/ui/date-picker.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/date-picker.json

See registry manifest

Installed dependencies

Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.

Calendar slotsrc/registry/sources/refined/ui/calendar.tsxSupport

Popover slotsrc/registry/sources/refined/ui/popover.tsxSupport

Button slotsrc/registry/sources/refined/ui/button.tsxSupport

Surface variantssrc/registry/sources/refined/surface-variants.tsSupport

Raw code

Primary installed primitive source

Date picker slot

src/registry/sources/refined/ui/date-picker.tsx

"use client";

import { useState } from "react";

import { cn } from "@/components/refined-ui/lib/cn";

import { Button } from "@/components/refined-ui/ui/button";

import { Calendar } from "@/components/refined-ui/ui/calendar";

import { Popover, PopoverContent, PopoverTrigger } from "@/components/refined-ui/ui/popover";

// Composed from Popover + Button trigger + Calendar (single-select); no own slot, inherits their theming.

// Controlled when `onValueChange` passed, else uncontrolled from `defaultValue`. Label via native Intl.DateTimeFormat.

export type DatePickerProps = {

value?: Date;

defaultValue?: Date;

onValueChange?: (date: Date | undefined) => void;

placeholder?: string;

disabled?: boolean;

className?: string;

// Intl options for the trigger label; defaults to a long localized date ("July 6, 2026").

formatOptions?: Intl.DateTimeFormatOptions;

};

export function DatePicker({

value,

defaultValue,

onValueChange,

placeholder = "Pick a date",

disabled,

className,

formatOptions = { dateStyle: "long" },

}: DatePickerProps) {

const [open, setOpen] = useState(false);

const isControlled = onValueChange !== undefined;

const [internal, setInternal] = useState<Date | undefined>(defaultValue);

const selected = isControlled ? value : internal;

const handleSelect = (date: Date | undefined) => {

if (!isControlled) setInternal(date);

onValueChange?.(date);

setOpen(false);

};

return (

<Popover open={open} onOpenChange={setOpen}>

<PopoverTrigger

disabled={disabled}

render={<Button variant="surface" tone="neutral" disabled={disabled} />}

className={cn("w-56 justify-start gap-2 font-normal", !selected && "text-muted-foreground", className)}

>

<CalendarGlyph />

<span className="flex-1 truncate text-left">

{selected ? new Intl.DateTimeFormat(undefined, formatOptions).format(selected) : placeholder}

</span>

</PopoverTrigger>

<PopoverContent align="start" className="w-auto p-0">

<Calendar mode="single" selected={selected} onSelect={handleSelect} />

</PopoverContent>

</Popover>

);

}

function CalendarGlyph() {

return (

<svg

viewBox="0 0 16 16"

className="size-4 shrink-0 text-muted-foreground"

fill="none"

stroke="currentColor"

strokeWidth="1.5"

aria-hidden="true"

>

<rect x="2.5" y="3" width="11" height="10.5" rx="1.5" />

<path d="M2.5 6.5h11M5.5 1.75v2.5M10.5 1.75v2.5" strokeLinecap="round" />

</svg>