saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Date Picker

Date Picker

A date picker component with calendar popup.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/date-picker

Usage

import { DatePicker } from "@/components/ui/date-picker"
<DatePicker date={date} onDateChange={setDate} />

Examples

Sizes

Loading...
Size variants.

With Label

Loading...
Date picker with label.

With Presets

Loading...
Preset date buttons.

Date Range

Loading...
Date range picker.

API Reference

PropTypeDefaultDescription
dateDate—Selected date.
onDateChange(date: Date) => void—Date change handler.

On This Page

  • Installation
  • Usage
  • Examples
  • Sizes
  • With Label
  • With Presets
  • Date Range
  • API Reference

Small

Default

Large

Choose the date when production begins.