Figma date picker components

Every date picker is a compromise between two ways of answering the same question. Some people already know the date and want to type six characters. Others are working from a relative idea, the second Tuesday, the day after the invoice clears, and need to see the month laid out to find it. Booking flows, expense forms, analytics filters and scheduling links all live somewhere on that spectrum, and choosing wrongly shows up as a field people abandon.

One date, a range, or a time slot

The set covers three types and they are not interchangeable. Single date opens one 328px month and closes. Dual dates opens two months side by side in an 808px panel, which is what a range needs so that a period spanning the end of a month does not require navigating backwards and forwards. Available times pairs a month with a list of bookable slots, the pattern behind every scheduling link.

The trigger itself is a 36px field that grows with what it holds: a range placeholder sits at 137px and stretches to 231px once two dates are in it, while a single date trigger barely moves. Design the field at its widest state, or the filter bar you laid out at 137px will reflow the first time somebody picks a fortnight.

Presets do most of the work

In the dual date menu a 152px panel runs down the left holding nine preset rows, each with selected, hover and focus states. In an analytics filter, most people never touch the grid at all; they take last 7 days or this month and move on, and the two calendars are there for the minority with a specific window in mind.

If your product has a reporting screen, the presets deserve more thought than the grid does, because they are the actual interface. A bottom panel closes the dual date menu with two 200px input fields and a cancel and apply pair, so a range can be typed as well as clicked, and nothing commits until apply is pressed.

The numeric date nobody can read

03/04/2026 is either the third of April or the fourth of March, and which one depends on where your user grew up. W3C's note on the ISO date format is the standard answer for machines, and it is the right storage format, but a field that shows 2026-04-03 to a customer is trading one kind of confusion for another.

The practical fix in the interface is to spell the month: show Apr 3, 2026 in the trigger and let the typed input accept whatever people give it. Nielsen Norman Group's guidelines on date input fields go further and argue for accepting slashes, dashes and spaces rather than rejecting a date because of the separator, which is a good rule for any input field that has a strong opinion about format.

Dropdown on desktop, modal on a phone

The same three types exist twice: as a dropdown anchored to the field, and as a modal drawn at 1,440px on desktop and 375px on mobile. The modal is the version that matters on small screens, where a dropdown menu would land half off the viewport.

Underneath both sits a 40px calendar cell with default, active, selected and today variants, each carrying hover and disabled states, and disabled is the one to plan for early: sold out days, dates before today, weekends a service does not operate. Greying them out inside the grid is far kinder than accepting the tap and returning an error underneath the field. For the surrounding screen, the calendar components handle the display side of dates once they are chosen.

When it is time to build, Untitled UI React date pickers are open source, built with Tailwind CSS and React Aria, with keyboard date entry, range selection and locale aware formatting handled for you.