Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Date Picker

Date Picker

A date picker component with range and presets.

Installation

npx shadcn@latest add https://ui.saturation.io/r/date-picker.json

Usage

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

export default function Example() {
  const [date, setDate] = useState<Date>()

  return (
    <DatePicker 
      date={date} 
      onDateChange={setDate}
      placeholder="Select a date"
    />
  )
}

Examples

Default

Sizes

With Label

With Presets

Date Range

API Reference

PropTypeDefaultDescription
dateDate-The selected date
onDateChange(date: Date | undefined) => void-Callback when date changes
placeholderstring"Pick a date"Placeholder text
size"sm" | "default" | "lg""default"Size variant
calendarSize"sm" | "default" | "lg"-Calendar size (defaults to size prop)

On This Page

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

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.