Date Picker
Week schedule
Best for
A day's plan under a week strip — dashboards, team pages, anything that opens on today
Anatomy
Month title with its menu · week steppers · seven day cards with event dots · the day's event card with Google Meet and the avatar group
Jan 2026 Calendar
Meeting With The Boss
Today 10:10 - 10:20 AM
The project meeting is to arrive at decisions that result in completed projects.
+4Booking
Best for
Scheduling pages — a host, a month of availability and the day's slots in one card
Anatomy
Host header with duration badge · month grid with availability legend · slot list · drawer footer with the live booking
Aria Park
Product strategy · intro call
February 2026
Monday
Feb 9 · 6 slots
Times in GMT+1 · London
Event date
Best for
A date field in a form that also shows what that day already holds
Anatomy
Field Header Label with required mark · 60px field with calendar · the picker below it · hint row · agenda on dark cards
Today · Saturday, June 6
2 events
Today
10:10 -
10:20 AM
Meeting With The Boss
Project kickoff · Room 4B
+4Today
2:00 -
3:00 PM
Design Review
Date picker handoff
Date picker
Best for
The picker on its own — a popover for a field, a filter, a form step
Anatomy
Month nav · Monday-first grid · today ring, picked fill, marked dots · Reset / Cancel / Save
February 2026
Range picker
Best for
Reports and filters — presets for the common spans, two months for everything else
Anatomy
Preset rail · two months side by side · the rgba brand band with pill ends · live read-out with Reset / Cancel / Save
February 2026
March 2026
Range: Feb 16, 2026 – Mar 07, 2026
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Date Picker
Week schedule
Best for
A day's plan under a week strip — dashboards, team pages, anything that opens on today
Anatomy
Month title with its menu · week steppers · seven day cards with event dots · the day's event card with Google Meet and the avatar group
Jan 2026 Calendar
Meeting With The Boss
Today 10:10 - 10:20 AM
The project meeting is to arrive at decisions that result in completed projects.
+4Booking
Best for
Scheduling pages — a host, a month of availability and the day's slots in one card
Anatomy
Host header with duration badge · month grid with availability legend · slot list · drawer footer with the live booking
Aria Park
Product strategy · intro call
February 2026
Monday
Feb 9 · 6 slots
Times in GMT+1 · London
Event date
Best for
A date field in a form that also shows what that day already holds
Anatomy
Field Header Label with required mark · 60px field with calendar · the picker below it · hint row · agenda on dark cards
Today · Saturday, June 6
2 events
Today
10:10 -
10:20 AM
Meeting With The Boss
Project kickoff · Room 4B
+4Today
2:00 -
3:00 PM
Design Review
Date picker handoff
Date picker
Best for
The picker on its own — a popover for a field, a filter, a form step
Anatomy
Month nav · Monday-first grid · today ring, picked fill, marked dots · Reset / Cancel / Save
February 2026
Range picker
Best for
Reports and filters — presets for the common spans, two months for everything else
Anatomy
Preset rail · two months side by side · the rgba brand band with pill ends · live read-out with Reset / Cancel / Save
February 2026
March 2026
Range: Feb 16, 2026 – Mar 07, 2026
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.