DatePicker

showLabel is visibleLabel, named after the label that visibleLabel={false} hides.

The field keeps its minimum width, 12 rem, in a container sized to its content, such as an inline-flex toolbar, rather than growing after the container measured it and pushing its neighbours onto another row; in a narrower container it still takes the container's width. The calendar's month and year, env-calendar-heading, are env-calendar-title.

With the minute granularity, the time is chosen on wheels of hours, minutes every minuteStep minutes (15) and, on a 12-hour clock, day periods, beside the calendar, in place of the time field under it; turning a wheel sets the time at once. The calendar has no Done button, and doneLabel is gone: it closes as a date-only one does. The field and popup are shared with TimePicker and MonthPicker.

withTime is granularity, "day" or "minute"; hint is description; variant="outlined" is variant="outline". className and style style the field's root rather than the button, which takes ref. The calendar opens on the shared popup, its month buttons are ghost icon buttons, and its labels come from EnvUIProvider's messages, as its locale does: env-date-time-well is env-date-picker-control.

DateTimeField is DatePicker, with the env-date-picker-* classes; the page is date-picker.

Colors under the pointer and while pressed change with --env-motion-ease-enter, rather than easing in slowly, so hover and press show from the first frame.

The calendar's popup opens over --env-motion-duration-medium, fading in and growing from 98 % with --env-motion-ease-enter, rather than growing from 96 % over the slow duration, so it shows from its first frames rather than late.

The field keeps its focused frame and label until the calendar has closed, rather than fading and coming back as focus returns.

With the minute granularity, hourCycle, h12 or h23, sets the time's clock whatever the locale's, such as 18:00 with no AM/PM wheel in English; the value stays YYYY-MM-DDTHH:mm.

The calendar's days, on their own and in the popup, are a little less than a row height wide, 24 px at the compact scale and 32 px at the comfortable one, so the columns stand close around the numbers; they still touch, and touch screens keep touch-sized days.

A clearable field's clear button and its calendar icon stand a step apart, so they don't crowd each other in a small field.

While its calendar is open, the field keeps its focused frame, the accent edge and label, also when focus is in the popup, as when it opens under the pointer.

The calendar names the weekdays by their first two letters at every width and scale, Mo Tu We in English, where those tell the seven apart, so the names never run into each other in the popup's narrow days.

The calendar's month buttons show larger arrows, 1.25 rem, on slightly smaller buttons, so the month's name stays on one line, and the header keeps a little room under it before the weekdays, so it reads at the compact scale too.

The chosen hour and minute take the chosen day's solid accent fill rather than the selection's tint, and are round and as tall as a day, as the chosen day is, so a chosen day and time look alike and the wheels stay narrow; a wheel with fewer values than it shows rows, such as minutes every 15, no longer loops and shows a value twice, while its arrow keys still wrap around.

As a time wheel turns to a row pressed or scrolled to, the fill stays on that row rather than passing over the rows on the way, and a row's text takes the fill's color only while it is on the fill, so a value it leaves is never white on the popup.

With a time, the wheels move under the calendar where the card has no room for them beside it, rather than running past its edge.

Days outside min and max take the disabled text color, faded, so they can't be taken for days that can be chosen; today keeps its accent color.

The floating variant and the variant prop are gone: the field is outlined, and takes size="lg" in a long form on a page. The field takes a text area's rounded corners rather than round ends. A small one with a visible label takes the medium height, so its floated label and its value each have room, and says so in the console while developing: sm is for a field with its label hidden.

The calendar card takes the width of a field a little wider than it, up to 1 rem, and in a narrow window it is at least as wide as its field, so it ends with the field; Today and Clear follow the calendar's six weeks closely. Beside the calendar, the Time heading shares the line of the month's name.

defaultTime is placeholderTime, as React Aria names it: default names an uncontrolled starting value elsewhere.

The calendar popup is frosted: the popup's color lets a little of what is behind through, blurred, with a soft shadow and no outline edge but a faint hairline in dark, and is solid with its edge at high contrast and with reduced transparency. Its inset is a panel's, as wide as a popup row's corner: 14 px, 11.2 px at the compact scale. The calendar leads with the month's name, its buttons side by side at the end; the days of a week touch, a row height wide; today is in the accent color rather than ringed, and a day under the pointer takes the neutral fill.