RadCN
Inputsreadycomponentready

Date Picker

A package-backed date picker that composes RadCN button, popover, calendar, preset select, and native form submission.

Importimport { DatePicker } from 'radcn/date-picker'
Preview

Live package example

Render the three upstream Date Picker examples with single, preset, and range behavior while keeping ISO values and native forms explicit.

Single, Presets, and Range

Render the three upstream Date Picker examples with single, preset, and range behavior while keeping ISO values and native forms explicit.

Preview
import { DatePicker } from 'radcn/date-picker'

export function DatePickerExamples() {
  return (
    <>
      <DatePicker defaultOpen month="2026-06-01" name="date" />

      <DatePicker
        defaultOpen
        month="2026-06-01"
        name="preset_date"
        presets={[
          { label: 'Today', value: '2026-06-12' },
          { label: 'Tomorrow', value: '2026-06-13' },
          { label: 'In 3 days', value: '2026-06-15' },
          { label: 'In a week', value: '2026-06-19' },
        ]}
      />

      <DatePicker
        defaultOpen
        defaultValue="2026-06-12..2026-06-18"
        mode="range"
        month="2026-06-01"
        name="range"
        numberOfMonths={2}
      />
    </>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { DatePicker } from 'radcn/date-picker'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Uses a native button trigger, popover content, and calendar grid semantics inherited from RadCN primitives.
  • Stores submitted values in a native hidden input when name is provided.
  • Supports disabled trigger state and required hidden inputs for form participation.

Customization

  • Exposes data-radcn-date-picker, data-radcn-date-picker-label, data-radcn-date-picker-preset-select, and existing calendar/popover hooks.
  • Uses ISO string values so apps can format labels, persist values, and validate dates without adopting a package-level date library.
  • Use class and style plus Date Picker, Calendar, and Popover CSS variables for widths, spacing, borders, and calendar presentation.

Remix 3 Notes

  • shadcn/ui presents date picker as examples rather than a standalone ui component. RadCN promotes the composition into a package API so the product has an importable Date Picker surface.
  • RadCN does not depend on React state, external calendar/date formatting packages, or slot wrappers. The browser enhancer updates labels, hidden inputs, presets, and range state from platform events.
  • React useState and onSelect map to explicit DatePicker props, Calendar events, hidden input values, and app/server-owned state.
  • date-fns format and addDays map to ISO values, deterministic DatePicker labels, and explicit preset values.
  • react-day-picker DateRange maps to YYYY-MM-DD..YYYY-MM-DD range strings.
  • defaultMonth maps to month, numberOfMonths maps to numberOfMonths, className maps to class, and asChild maps to explicit DatePicker trigger composition.
  • CalendarIcon and lucide-react are app-owned presentation; RadCN keeps a dependency-free trigger icon span.
  • Tailwind utilities map to RadCN classes, class, style, CSS variables, and app CSS.
  • Popover and Calendar composition remains package-owned coordination over existing RadCN primitives.
  • vendor source remains read-only evidence and is not imported by RadCN.