UI Skillbook
2

Date Field

A typed date input built from day, month and year segments, with an optional calendar popover.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

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

Paste this into your agent.

Date Field lets people who know the date type it fast, as with invoice dates or birth dates, and still offers a calendar. It submits a stable ISO day string whatever the display locale.

Install

bashnpx shadcn@4.18.0 add @siteplane/date-field

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

When to pick it

  • vs Date Picker: Pick Date Picker when choosing from a calendar is the main path and typing adds nothing.
  • vs Date Time Picker: Pick Date Time Picker when a time of day is needed too.
  • vs Calendar: Pick Calendar when the month grid should stay visible on the page.

Rules

  • Store null for an empty controlled value; onValueChange reports undefined when cleared.
  • Pass calendarProps with disabled, startMonth and endMonth. Typed dates that break those rules turn invalid.
  • Set name to submit YYYY-MM-DD, and use required with FieldError for the missing message.
  • Use iconMode="decorative-start" for birth dates, where a calendar does not help.
  • Name it with FieldLabel or aria-label, keep a top label, and add className="w-full" to fill a column.

Reference

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

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Siteplane Checkboxby UI Skillbook

A box for one independent yes/no choice, with indeterminate state and form submission built in.

Siteplane UI

Siteplane Checkbox Groupby UI Skillbook

Holds a set of related checkboxes as one array value, with an optional parent box that selects all.

Siteplane UI

Siteplane Fieldby UI Skillbook

Ties a control to its label, help text and validation messages, with top or floating labels.

Siteplane UI

Siteplane Fieldsetby UI Skillbook

Groups related form fields under a shared legend and optional description, and can disable them together.

Siteplane UI

Back to Siteplane UI