import { ComponentExample } from "@/components/ComponentExample" import { ComponentReference } from "@/components/ComponentReference"

export const metadata = { title: Date Picker, }

{metadata.title}

A component for rendering date picker inputs with range and presets.

In this guide, you'll learn how to use the Date Picker component.

Usage

tsx

import { DatePicker } from "@medusajs/ui"

tsx

<DatePicker />

Manage and store the value of the date picker in a state variable for controlled behavior. This is also useful for form integration.

Enable time selection with different granularity levels for precise scheduling.

Restrict date selection to a specific range by setting minimum and maximum values.

In the example below, you can only select dates within the next 30 days. Dates outside the range are disabled.

Disable specific dates like weekends and holidays to prevent selection of unavailable dates.

The example below disables weekends and holidays like Christmas.

Different levels of time precision from date-only to second-precision selection.

The following example shows how to use the date picker in a form, with simulated form submission.