UI Skillbook
2

Date Time Picker

One control for a local date and time, with typed segments, a calendar and a time selector.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

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

Paste this into your agent.

Date Time Picker fits scheduled publishes, meeting starts and reminders where both day and time matter. It submits a local date-time string with no time zone, so your app handles conversion.

Install

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

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

When to pick it

  • vs Date Field: Pick Date Field when only the day matters.
  • vs Time Field: Pick Time Field for a time with no date, like a daily reminder.
  • vs Date Picker: Pick Date Picker for a calendar-only date choice without typing.

Rules

  • Treat the value as { date, time: { hour, minute } } and store null when empty.
  • Set name to submit YYYY-MM-DDTHH:mm and convert time zones yourself.
  • Use minuteStep for selector options. Validate the step and business hours in app code and on the server.
  • Set hourCycle={12} for AM/PM display; the value stays 24-hour.
  • Block days with calendarProps.disabled. The picker does not check time rules for you.

Reference

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