export const title = "Date picker components"
export const description = "Free and open-source React date picker components built for modern applications and websites. These date pickers are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/date-picker",
    rac: "https://react-spectrum.adobe.com/react-aria/DatePicker.html"
}

import * as Demos from "@/components/application/date-picker/date-picker.story.tsx";

<PreviewAndCode title="Date picker example">
    <ResizablePreview id="preview" className="flex min-h-[400px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary py-8">
        <div style={{ width: "180px", display: "flex", justifyContent: "end" }}>
            <Demos.DatePickerControlledDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="date-picker/DatePickerControlledDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this date picker component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add date-picker
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Install dependencies">
                As our calendar component is built with [Internationalized Date](https://www.npmjs.com/package/@internationalized/date) and [React Aria](https://www.npmjs.com/package/@react-aria/i18n), you'll need to install the dependencies:
                ```bash
                npm install @internationalized/date @react-aria/i18n
                ```
            </Step>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/date-picker" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the date picker components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Date picker examples

Below are examples and variations of this date picker component:

### Date picker {{ tocOnly:true }}

<PreviewAndCode title="Date picker">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <div style={{ width: "180px", display: "flex", justifyContent: "end" }}>
            <Demos.DatePickerControlledDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="date-picker/DatePickerControlledDemo" />
    </TabPanel>
</PreviewAndCode>

### Date time picker {{ tocOnly:true }}

<PreviewAndCode title="Date time picker">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <div style={{ width: "180px", display: "flex", justifyContent: "end" }}>
            <Demos.DateTimePickerDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="date-picker/DateTimePickerDemo" />
    </TabPanel>
</PreviewAndCode>

### Date range picker with presets {{ tocOnly:true }}

<PreviewAndCode title="Date range picker with presets">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <div style={{ width: "260px", display: "flex", justifyContent: "end" }}>
            <Demos.DateRangePickerControlledDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="date-picker/DateRangePickerControlledDemo" />
    </TabPanel>
</PreviewAndCode>

### Calendar {{ tocOnly:true }}

<PreviewAndCode title="Calendar">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CalendarDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="date-picker/CalendarDemo" />
    </TabPanel>
</PreviewAndCode>

### Calendar card {{ tocOnly:true }}

<PreviewAndCode title="Calendar card">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.CalendarCardDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="date-picker/CalendarCardDemo" />
    </TabPanel>
</PreviewAndCode>

### Range calendar {{ tocOnly:true }}

<PreviewAndCode title="Range calendar">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.RangeCalendarDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="date-picker/RangeCalendarDemo" />
    </TabPanel>
</PreviewAndCode>

### Range calendar card {{ tocOnly:true }}

<PreviewAndCode title="Range calendar card">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.RangeCalendarCardDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="date-picker/RangeCalendarCardDemo" />
    </TabPanel>
</PreviewAndCode>