UI Skillbook
2

Date Picker

A button that opens a calendar to choose one date, showing the chosen date as formatted text.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

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

Paste this into your agent.

Date Picker fits due dates, appointment dates and filters, where people would rather pick from a calendar than type. The trigger stays compact and the value is a native Date.

Install

bashnpx shadcn@4.18.0 add @siteplane/date-picker

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

When to pick it

  • vs Date Field: Pick Date Field when people type the date or the value must show as read-only.
  • vs Date Range Picker: Pick Date Range Picker when you need a start and an end date.
  • vs Date Time Picker: Pick Date Time Picker when a time is part of the value.
  • vs Calendar: Pick Calendar when the grid should stay visible.

Rules

  • In a controlled picker, store null for no date. Don't use undefined.
  • Block days through calendarProps.disabled and validate the date again on the server.
  • formatValue changes only the trigger text, and it also replaces placeholder.
  • Set name to submit YYYY-MM-DD and required to block empty submits.
  • Date Picker has no read-only mode. Switch to Date Field for a locked date.

Reference

  • Date 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-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