# Date picker: Month and year dropdowns

> For far-away dates like a birthday, set `captionLayout: "dropdown"` with a `startMonth` and `endMonth`. Label the trigger with a `<label />` pointing at its `id`.

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

## Add this example

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

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

## Source

```tsx title="components/examples/date-picker/dropdowns.tsx"
import { DatePicker } from "@/components/ui/date-picker"

export function DatePickerDropdowns() {
  return (
    <div className="flex flex-col gap-1.5">
      <label htmlFor="birthday" className="text-sm font-medium">
        Date of birth
      </label>
      <DatePicker
        id="birthday"
        placeholder="Select your birthday"
        calendarProps={{
          captionLayout: "dropdown",
          startMonth: new Date(1920, 0),
          endMonth: new Date(),
          disabled: { after: new Date() },
        }}
      />
    </div>
  )
}
```

## Props in this example

### DatePicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `string` | `"Pick a date"` |  |
| `calendarProps` | `CalendarProps` | – | Passed to the calendar, except mode, selected, onSelect, required, numberOfMonths and autoFocus. Use it for disabled days, captionLayout, startMonth, endMonth, locale and dir. |

## 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)
- [In a form](https://hextaui.com/docs/date-picker/examples/form.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)