+5Date Picker
A date picker is a calendar rendered as an input: a grid of days a reader clicks instead of typing, with today, the picked day and the unavailable days each drawn differently. Orvain's Date Picker family covers five of them, the picker on its own, a range picker with a preset rail and two months side by side, a form field that also shows what the chosen day already holds, a booking card pairing a month of availability with that day's slots, and a week strip over the day's schedule.
The grid is the easy half. What breaks a date field is everything around it: people paste dates in formats the parser was never shown, a range whose end falls before its start has to be caught without discarding the pick, and a calendar date is not an instant, store one as a timestamp and a colleague five timezones away reads the day before. Decide early whether the value is a day on a wall calendar or a moment in time, because the two need different storage.
Week schedule
Best for
A day's plan under a week strip: dashboards, team pages, anything that opens on today
Anatomy
Month and event-count overline over the day title · week steppers and menu · a week tray with a sliding date circle and event dots · the day's events as rows (organiser, time, start pill or countdown) that open to the Join pill, copy link and the avatar group
January 2026 · 3 events
Today, 7
The project meeting is to arrive at decisions that result in completed projects.
+4
Cara walks through the new token pipeline.
+6
Goals for the quarter and feedback on the release.
Day planner
Best for
A to-do list for the day under a week strip: habit trackers, personal dashboards, daily plans
Anatomy
Two cards · month and done-count overline over the day title · week steppers and menu · a week tray with a sliding date circle and a progress bar under each date · a dark segmented control (To do / Completed / Later, with counts) · groups that fold, each task a checkbox, icon and label that strikes through and slides into Completed · Later and Move back on hover
December 2025 · 2 of 7 done
Today, 10
- Gym or workout
- Share updates with the team
- Improve the portfolio case study
- Plan tomorrow’s top task
Booking
Best for
Scheduling pages: a host, a month of availability and the day's times, one step at a time
Anatomy
Host · 15 / 30 / 45 min length switch and time-zone menu · three-dash step marker · Next free chip · month in a soft panel, bookable days tinted, few-left dots · folds into the picked day with Change · times as pills, three per row · optional note · summary bar that turns brand-tint with Confirm · booked ticket with Reschedule and Add to calendar
Aria ParkProduct strategy · intro callStep 2 of 3 · Pick a time
Monday, February 95 of 6 times free
Pick a time on Mon 9 Feb
Event date
Best for
Picking a date in a form while seeing what that day already holds, drawn to scale
Anatomy
Label with required mark · the month open in the card, today ringed, the pick a flat brand fill, a dot per event · Today / Tomorrow / In N days over the date and the count · the day to scale: faint hours, a dotted line where each event is a thick stretch in its colour, kind, time, title and faces beside it, free time labelled on the line, a red Now line on today with the past faded · ⋮ (Duplicate / Delete) on hover · Add an event row
Event date
June 2026
MonTueWedThuFriSatSun
Today
Saturday, June 6
2 events
Meeting10:10 – 10:20 AM
Meeting with the boss
Project kickoff · Room 4B+5Review2:00 – 3:00 PM
Design review
Date picker handoff
Date picker
Best for
The picker on its own, with quick picks for the usual days: a popover for a field, a filter, a form step
Anatomy
Quick picks rail (Today, Tomorrow, Next Monday, In a week, In a month, End of month, each with its day; a wrapping row above the month on phones) · month name that opens a month view · borderless arrows · Monday-first grid of circles: today ringed, the pick a flat brand fill, dots for days that hold something · Selected and the day in words, Cancel and Save (enabled once the pick changes)
Quick picks
MonTueWedThuFriSatSun
SelectedMon, 9 Feb 2026
Range picker
Best for
Reports and filters: presets for the common spans, two months for everything else
Anatomy
Preset rail that lights the preset matching the range · two months side by side, each showing only its own days · the rgba brand band with pill ends, a lighter band to an outlined end while the end is chosen · read-out with the day count and Reset / Cancel / flat Save, enabled once the range changes
February 2026
MonTueWedThuFriSatSun
March 2026
MonTueWedThuFriSatSun
Range: Feb 16, 2026 — Mar 7, 2026 · 20 days
01
Using Date Picker
Reach for it when
- A form field whose value is a calendar day and the reader knows roughly which one.
- A report filter where the common answers are spans: last week, this month, last quarter.
- Booking, where availability differs day by day and the grid has to show which days still have room.
- A field where the neighbouring days carry information: days already committed, days blacked out.
Reach for something else when
- A date of birth or anything decades away. Paging back hundreds of months is punishment; use a typed field with a forgiving parser, or year and month selects.
- An operator entering dates all day, faster than they can click. Keep the typed input primary and hang the calendar off it as an optional popover.
- A time of day or a duration. A day grid has nowhere to put 09:30. That is a time picker's job.
02
Where it shows up
01
Booking a call
A scheduling page shows the host, the month with unavailable days dimmed, and the slots for whichever day is picked. The footer reads back the date, time and timezone before anything is confirmed.
02
Report date range
Analytics filters where most readers want a named span and a few want an exact one. Presets answer the common case in a click; the two-month grid is there for the quarter that ended on a Tuesday.
03
Task due date
A due-date field in an issue form, with dots on the days that already carry work. The picker doubles as a load check, so a deadline lands on a quiet day rather than the busiest one.
04
Week planner header
A dashboard that opens on today: a strip of seven day cards with dots for what each holds, and the picked day's agenda underneath. Stepping a week is one button, not a month grid.
03
Questions
Which month should a date picker open on?
The month holding the current value, so the reader sees their own choice in context rather than having to find it again. With an empty field, open on the current month and put the focus ring on today. When a minimum date rules out today, such as a booking that needs two days' notice, open on the first month that contains a selectable day.
How do you make a date picker usable from the keyboard?
Treat the month as a grid rather than a list of buttons. Arrow keys move one day, up and down move one week, Page Up and Page Down change month, and Home and End jump to the ends of the week. The whole grid is a single tab stop, with the focused day carrying the only tabindex, so nobody tabs through a month of cells to reach Save.
The Orvain DispatchPremium components,
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Just components, never spam. You can unsubscribe anytime.
Orvain MCPDate Picker
A date picker is a calendar rendered as an input: a grid of days a reader clicks instead of typing, with today, the picked day and the unavailable days each drawn differently. Orvain's Date Picker family covers five of them, the picker on its own, a range picker with a preset rail and two months side by side, a form field that also shows what the chosen day already holds, a booking card pairing a month of availability with that day's slots, and a week strip over the day's schedule.
The grid is the easy half. What breaks a date field is everything around it: people paste dates in formats the parser was never shown, a range whose end falls before its start has to be caught without discarding the pick, and a calendar date is not an instant, store one as a timestamp and a colleague five timezones away reads the day before. Decide early whether the value is a day on a wall calendar or a moment in time, because the two need different storage.
Week schedule
Best for
A day's plan under a week strip: dashboards, team pages, anything that opens on today
Anatomy
Month and event-count overline over the day title · week steppers and menu · a week tray with a sliding date circle and event dots · the day's events as rows (organiser, time, start pill or countdown) that open to the Join pill, copy link and the avatar group
January 2026 · 3 events
Today, 7
The project meeting is to arrive at decisions that result in completed projects.
+4
Cara walks through the new token pipeline.
+6
Goals for the quarter and feedback on the release.
Day planner
Best for
A to-do list for the day under a week strip: habit trackers, personal dashboards, daily plans
Anatomy
Two cards · month and done-count overline over the day title · week steppers and menu · a week tray with a sliding date circle and a progress bar under each date · a dark segmented control (To do / Completed / Later, with counts) · groups that fold, each task a checkbox, icon and label that strikes through and slides into Completed · Later and Move back on hover
December 2025 · 2 of 7 done
Today, 10
- Gym or workout
- Share updates with the team
- Improve the portfolio case study
- Plan tomorrow’s top task
Booking
Best for
Scheduling pages: a host, a month of availability and the day's times, one step at a time
Anatomy
Host · 15 / 30 / 45 min length switch and time-zone menu · three-dash step marker · Next free chip · month in a soft panel, bookable days tinted, few-left dots · folds into the picked day with Change · times as pills, three per row · optional note · summary bar that turns brand-tint with Confirm · booked ticket with Reschedule and Add to calendar
Aria ParkProduct strategy · intro callStep 2 of 3 · Pick a time
Monday, February 95 of 6 times free
Pick a time on Mon 9 Feb
Event date
Best for
Picking a date in a form while seeing what that day already holds, drawn to scale
Anatomy
Label with required mark · the month open in the card, today ringed, the pick a flat brand fill, a dot per event · Today / Tomorrow / In N days over the date and the count · the day to scale: faint hours, a dotted line where each event is a thick stretch in its colour, kind, time, title and faces beside it, free time labelled on the line, a red Now line on today with the past faded · ⋮ (Duplicate / Delete) on hover · Add an event row
Event date
June 2026
MonTueWedThuFriSatSun
Today
Saturday, June 6
2 events
Meeting10:10 – 10:20 AM
Meeting with the boss
Project kickoff · Room 4B+5Review2:00 – 3:00 PM
Design review
Date picker handoff
Date picker
Best for
The picker on its own, with quick picks for the usual days: a popover for a field, a filter, a form step
Anatomy
Quick picks rail (Today, Tomorrow, Next Monday, In a week, In a month, End of month, each with its day; a wrapping row above the month on phones) · month name that opens a month view · borderless arrows · Monday-first grid of circles: today ringed, the pick a flat brand fill, dots for days that hold something · Selected and the day in words, Cancel and Save (enabled once the pick changes)
Quick picks
MonTueWedThuFriSatSun
SelectedMon, 9 Feb 2026
Range picker
Best for
Reports and filters: presets for the common spans, two months for everything else
Anatomy
Preset rail that lights the preset matching the range · two months side by side, each showing only its own days · the rgba brand band with pill ends, a lighter band to an outlined end while the end is chosen · read-out with the day count and Reset / Cancel / flat Save, enabled once the range changes
February 2026
MonTueWedThuFriSatSun
March 2026
MonTueWedThuFriSatSun
Range: Feb 16, 2026 — Mar 7, 2026 · 20 days
01
Using Date Picker
Reach for it when
- A form field whose value is a calendar day and the reader knows roughly which one.
- A report filter where the common answers are spans: last week, this month, last quarter.
- Booking, where availability differs day by day and the grid has to show which days still have room.
- A field where the neighbouring days carry information: days already committed, days blacked out.
Reach for something else when
- A date of birth or anything decades away. Paging back hundreds of months is punishment; use a typed field with a forgiving parser, or year and month selects.
- An operator entering dates all day, faster than they can click. Keep the typed input primary and hang the calendar off it as an optional popover.
- A time of day or a duration. A day grid has nowhere to put 09:30. That is a time picker's job.
02
Where it shows up
01
Booking a call
A scheduling page shows the host, the month with unavailable days dimmed, and the slots for whichever day is picked. The footer reads back the date, time and timezone before anything is confirmed.
02
Report date range
Analytics filters where most readers want a named span and a few want an exact one. Presets answer the common case in a click; the two-month grid is there for the quarter that ended on a Tuesday.
03
Task due date
A due-date field in an issue form, with dots on the days that already carry work. The picker doubles as a load check, so a deadline lands on a quiet day rather than the busiest one.
04
Week planner header
A dashboard that opens on today: a strip of seven day cards with dots for what each holds, and the picked day's agenda underneath. Stepping a week is one button, not a month grid.
03
Questions
Which month should a date picker open on?
The month holding the current value, so the reader sees their own choice in context rather than having to find it again. With an empty field, open on the current month and put the focus ring on today. When a minimum date rules out today, such as a booking that needs two days' notice, open on the first month that contains a selectable day.
How do you make a date picker usable from the keyboard?
Treat the month as a grid rather than a list of buttons. Arrow keys move one day, up and down move one week, Page Up and Page Down change month, and Home and End jump to the ends of the week. The whole grid is a single tab stop, with the focused day carrying the only tabindex, so nobody tabs through a month of cells to reach Save.
Related blocks
All blocksThe Orvain Dispatch
Premium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Just components, never spam. You can unsubscribe anytime.
