# Multi-Date Picker

https://fieldbook.lizardi.mx/components/multi-date-picker

Category: Inputs
![Still of the Multi-Date Picker component, a Fieldbook UI component in Inputs.](https://fieldbook.lizardi.mx/thumbs/multi-date-picker.webp)
Preview video: https://ejpqcxcjbiyabxkx.public.blob.vercel-storage.com/previews/multi-date-picker-76c1dbe523.mp4 (5 s, silent)

Multi-Date Picker: A two month calendar for picking a handful of individual, non-consecutive dates up to a maximum count, with every pick shown as its own filled day.

## Frameworks

react, vue, svelte, astro, html

## Preview controls

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

| Name | Type | Default | Options or constraints |
| --- | --- | --- | --- |
| accent | color | #F5C542 | No additional limit in the metadata. |
| maxDates | number | 5 | From 1 to 10; step 1 |
| startMonth | number | 6 | From 1 to 12; step 1 |
| startYear | number | 2025 | From 2020 to 2030; step 1 |

## Usage notes

Multi-Date Picker uses the wide preview frame with a light/dark theme setting.

### Which frameworks are available for Multi-Date Picker?

Multi-Date Picker is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

### What does Multi-Date Picker depend on?

The React metadata lists no additional npm dependencies beyond React.

### What accessibility details are visible in Multi-Date Picker?

The React source for Multi-Date Picker includes: native elements (button); attributes and handlers (aria-disabled, aria-hidden, aria-label, aria-pressed, onKeyDown, tabIndex); key comparisons (ArrowDown, ArrowLeft, ArrowRight, ArrowUp). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

### How does Multi-Date Picker handle reduced motion?

The source scan found no direct useReducedMotion() or matchMedia preference read in Multi-Date Picker's index.tsx. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

## Install through MCP

Connect your client, call get_component to retrieve the implementation, then get_install_command for installation instructions. Choose a listed framework, integrate the returned source and verify it in your application.

```json
{
  "tool": "get_component",
  "arguments": {
    "slug": "multi-date-picker",
    "framework": "react"
  }
}
```

[For agents](https://fieldbook.lizardi.mx/docs/agents)
[MCP](https://fieldbook.lizardi.mx/api/mcp)

## Related open components

- [Appointment Range Card](https://fieldbook.lizardi.mx/components/appointment-range-card)
- [Birthdate popover picker](https://fieldbook.lizardi.mx/components/birthdate-popover-picker)
- [Mobile date drawer](https://fieldbook.lizardi.mx/components/mobile-date-drawer)
- [Multi select toggle row](https://fieldbook.lizardi.mx/components/multi-select-toggle-row)
- [Natural Language Date Field](https://fieldbook.lizardi.mx/components/natural-language-date-field)
- [Stacked option checklist](https://fieldbook.lizardi.mx/components/stacked-checkbox-list)