UI Skillbook
2

Date Range Picker

A typed start-and-end date field with a calendar popover, submitting two ISO day strings.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-date-range-picker and follow the Siteplane Date Range Picker skill it prints for this task.

Paste this into your agent.

Date Range Picker covers trips, out-of-office spans, report periods and bookings. People type both ends or select them in a calendar, and the control reports only complete ranges.

Install

bashnpx shadcn@4.18.0 add @siteplane/date-range-picker

Import it from @/siteplane/components/date-range-picker. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Calendar: Pick Calendar with selectionMode="range" for an always-visible grid, two months side by side or quick shortcuts.
  • vs Date Picker: Pick Date Picker when only one date is needed.
  • vs Date Field: Pick two Date Fields only when the two ends are independent questions.

Rules

  • Form data carries the two ends under startName and endName. The picker takes no single name and posts no combined range value.
  • Store null for an empty controlled range. The value is { from, to }, and undefined means cleared.
  • Pass booking rules through calendarProps and re-check the range on the server.
  • Set startLabel and endLabel when the default Start Date and End Date names are too generic.
  • Use iconMode="none" when a separate Calendar on the page already drives the range.

Reference

  • Date Range Picker docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Date & color. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-date-range-picker

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Form Field Validation Timingby UI Skillbook

Validate at the right moment — not on every keystroke, not only on submit.

Forms

Siteplane Attachmentby UI Skillbook

A card for a file or image attached to a message or draft, with upload states and actions.

Siteplane UI

Siteplane Autocompleteby UI Skillbook

A text input that suggests completions while still accepting whatever the person types.

Siteplane UI

Siteplane Calendarby UI Skillbook

An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.

Siteplane UI

Back to Siteplane UI