# Date picker: In a form

> With `name`, a single date is submitted as `2026-10-14` and a range as `2026-10-20/2026-10-24`. Empty pickers submit an empty string.

Example: https://hextaui.com/docs/date-picker/examples/form
Component docs: https://hextaui.com/docs/date-picker.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/date-picker-form.json
```

This adds `components/examples/date-picker/form.tsx` with the Date picker component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/date-picker/form.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { DatePicker, DateRangePicker } from "@/components/ui/date-picker"

export function DatePickerForm() {
  const [submitted, setSubmitted] = React.useState<string>()

  return (
    <form
      className="flex flex-col items-start gap-3"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        setSubmitted(JSON.stringify(Object.fromEntries(data)))
      }}
    >
      <DatePicker name="due" defaultValue={new Date(2026, 9, 14)} />
      <DateRangePicker
        name="stay"
        defaultValue={{
          from: new Date(2026, 9, 20),
          to: new Date(2026, 9, 24),
        }}
      />
      <Button type="submit">Submit</Button>
      <output className="text-sm break-all text-muted-foreground">
        {submitted ?? "Not submitted"}
      </output>
    </form>
  )
}
```

## Props in this example

### DatePicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `Date \| null` | `null` |  |
| `name` | `string` | – | Renders a hidden input so the value is submitted with its form. |

### DateRangePicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `{ from: Date; to?: Date } \| null` | `null` |  |
| `name` | `string` | – | Renders a hidden input so the value is submitted with its form. |

## More Date picker examples

- [Controlled](https://hextaui.com/docs/date-picker/examples/controlled.md)
- [Range](https://hextaui.com/docs/date-picker/examples/range.md)
- [Disabled days](https://hextaui.com/docs/date-picker/examples/disabled-days.md)
- [Month and year dropdowns](https://hextaui.com/docs/date-picker/examples/dropdowns.md)
- [Disabled](https://hextaui.com/docs/date-picker/examples/disabled.md)
- [Narrow container](https://hextaui.com/docs/date-picker/examples/narrow.md)
- [Inside a sheet](https://hextaui.com/docs/date-picker/examples/in-sheet.md)
- [Right to left](https://hextaui.com/docs/date-picker/examples/rtl.md)