SayUI
← Library→ Turn this into a prompt
Input & controls

Date Picker

Pick a date (or range) from a calendar grid or mobile wheels.

Also known as calendar picker · date input · range picker

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Date Picker".

Prefer <input type="date"> for simple mobile cases. Custom calendar: role="grid" with arrow keys, year dropdown for far dates like birthdays, typed ISO input on desktop, and range mode that disables impossible end dates while selecting.

Anatomy:
- input / trigger: Shows the value; desktop should allow typing too.
- calendar panel: Desktop month grid.
- wheel picker: Common mobile pattern: year / month / day columns.
- range picker: Start and end for hotels, flights, reports.

Preferred API / pattern: `react-day-picker / shadcn Calendar`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Birthday only month-by-month
  • ○Avoid: Desktop calendar forced on a phone
  • ○Avoid: Range error only on submit
  • ○Avoid: Serializing Date objects across timezones

In plain wordsHow people search for it

“the calendar popup where I pick a day”“birthday field that opens a month grid”“choosing check-in and check-out dates”

AnatomyOpen for part names

input / trigger
Shows the value; desktop should allow typing too.
calendar panel
Desktop month grid.
wheel picker
Common mobile pattern: year / month / day columns.
range picker
Start and end for hotels, flights, reports.

How to write itOpen for stack patterns

Web (HTML/CSS)<input type="date"> / calendar grid pattern
React + Tailwind + shadcn/uireact-day-picker / shadcn Calendar
SwiftUIDatePicker
Ant Design<DatePicker> / <RangePicker>

Notes

Desktop and mobile are different animals: grids + typing on desktop; system picker or wheels on mobile. Birthdays need year jump—month paging from 2026 to 1990 is torture. Store dates as ISO date strings to avoid timezone day-shifts. Disable invalid range ends while picking, not after submit.

Common mistakesHumans and models trip here

  • Birthday only month-by-month: hundreds of clicks—jump years.
  • Desktop calendar forced on a phone: tiny hit targets—use system picker.
  • Range error only on submit: disable illegal days live.
  • Serializing Date objects across timezones: off-by-one days—use YYYY-MM-DD strings.

More failure symptoms on AI broke it.

Related patterns

Select / ComboboxA form control for choosing one (or more) options from a list.CascaderLinked multi-column hierarchy: each choice loads the next level’s options.Form FieldOne complete input unit: label, control, placeholder, helper text, and error message.

Spotted a wrong name or missing pattern?

Message on X