date-picker

27 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Time picker anatomy

Time picker consists of: Label (instructs user what to do), Hour and minute field (text input where user types hours and minutes of desired time), AM/PM selector (select control for choosing time period), and Timezone selector (select control for setting associated time zone).

Date picker variants

Date pickers have three main variants: Simple date input (for easily remembered dates like date of birth where calendar navigation is not needed), Calendar picker (single or range, for when user needs to know a date's relationship to other days or scheduling), and Time picker (for inputting a specific time).

Simple date input use cases

Use simple date input when the date can be easily remembered by the user such as a date of birth, or for approximate dates especially regarding past dates. The simple date input can include month/year or month/day/year and formatting may be localized and rearranged.

Calendar picker use cases

Use a calendar picker (single or range) when the user needs to know a date's relationship to other days such as day of the week, proximity to today, or for scheduling tasks. Calendar pickers work best for recent or near future dates. For far distant or future dates, consider defaulting the calendar open to a more convenient day.

Time picker use cases

Use time picker when a specific time needs to be scheduled, such as planning a meeting time. The time field format should include hour and minutes (for example 11:30) and may be localized to accommodate 12-hour or 24-hour format.

Date picker styles: Default vs Fluid

Date pickers come in two styles: Default (traditional style where label is positioned outside and above input field, use when white space is needed or in productive moments where space is premium) and Fluid (label placed inside input field stacked inline with user input, use in expressive moments, fluid forms, contained spaces, or attached to complex components like toolbars).

Default date picker input heights

Default input fields for date and time picker come in three height sizes: Small (sm) 32px/2rem (use when space is constricted or in long complex forms), Medium (md) 40px/2.5rem (default and most commonly used size), and Large (lg) 48px/3rem (use when there is a lot of space, typically in simple forms or when dropdown is placed by itself). The calendar menu is fixed height and width and does not change with input size.

Fluid date picker input height

There is only one fluid input height set at 64px, which is visually larger than default heights. This height applies except when a warning or error message has been added to the bottom.

Date picker width adjustment

By default, pickers have set widths. When placing the picker inline with other inputs in a form, widths can be adjusted to match other inputs and can increase or decrease as needed. Date pickers have minimum widths and date content should never horizontally scroll or overflow. The calendar menu itself always remains set width and is not adjustable, aligned to left edge of its text field.

Date format display requirements

When using simple date input, include the date format in parentheses inline with label or as helper text below label. When using calendar picker, date format is automated if user selects from calendar menu. Never use only placeholder text for date format inside field as it disappears when user begins typing. Date picker utilizes flatpickr which accepts dateFormat and locale props allowing different display formats and languages. Localizing static dates in same UI is recommended if localizing date entries.

Time format requirements

Both 12-hour and 24-hour time systems are allowed. If using 12-hour format it must be accompanied by AM/PM selection. Use uppercase letters and no periods for abbreviations AM and PM. Specific times should specify a timezone.

Date picker label requirements

Both date and time pickers must be accompanied with labels. Labels should be clear and descriptive. Range inputs should be properly labeled with a start and end label.

Date picker states

Date picker states are: Enabled (default, user not directly interacting), Hover (user's mouse cursor hovering over field), Focus (user tabs to or clicks into input), Open (calendar menu open, user can navigate to select date or range), Error (required field not filled or select has no selection, requires user response), Warning (calls attention to exception condition), Disabled (user cannot interact, not focusable, not read by screen readers), Skeleton (on initial page load to indicate not yet fully loaded), Read-only (user can review but not modify, focusable and accessible by screen readers).

Date picker validation

Invalid fields should be clearly marked. In pickers with more than one field, the invalid state should only be set on the individual field triggering the error so user can clearly understand which to address.

Calendar picker opening

Calendar can be opened in two ways: clicking the calendar icon on far right of field opens the calendar menu, or when the text field receives focus the calendar menu appears and remains open until a date is selected or focus is removed from picker.

Selecting a date from calendar

A date can be selected by: manually entering a date in text input field, clicking on a date in calendar menu, or navigating to a date using Arrow keys then pressing Enter.

Calendar month navigation

User can navigate between months in a year by clicking chevron icons at top left and right of calendar, or using Arrow keys to move into next or previous month.

Calendar year selection

To navigate to another year, user can: manually type the year in the date text field, click up and down arrows that appear when focusing or hovering on year input in calendar, or select then type into year input.

Closing the calendar

Calendar can be closed by: selecting a single date or end date in a range (automatically closes), clicking anywhere outside calendar menu, removing focus from picker, or pressing Esc.

Selecting a date range

A range can be selected by: manually typing start and end dates in text field, clicking first date as start date and second date as end date in open calendar, or navigating to start date using Arrow keys and pressing Enter, then continuing with Arrow keys to second date and pressing Enter again.

Min and max dates constraint

Min and max dates may be set to constrain selectable dates in calendar. Once set, only dates within min/max range are selectable with dates outside range being disabled. Use min and max dates to help prevent user error, such as setting min date to today if user cannot select past dates for scheduling.

Calendar picker single date variant

In single date picker user can manually input date in text field or select one specific date from calendar menu. It requires day, month, and year to be selected. Calendar variants show: today's date, hover state, day in month, selected day, and day in next/previous month.

Calendar picker date range variant

Date range picker functions like single date picker but user chooses start and end date. For each date in range, users can manually enter date in text field or select in calendar. Each point requires day, month, and year. Calendar shows: day in month, today, selected start date, day in range, end date hover and focus, day in next/previous month.

Date picker AI label feature

Date picker with AI label is now stable. This modification adds AI visual styling when AI label is present in input. The AI variant functions same as normal version except with addition of AI label which is both visual indicator and trigger for explainability popover. When user manually overrides AI-suggested content, input changes from AI variant to non-AI variant. Once edited, user should still be able to switch back to initially AI generated content via a revert to AI button.

When to use date picker

Use date picker when asking user for an exact, approximate, or memorable date or time, or for scheduling tasks.

Calendar difficulty consideration

Keep in mind that some users may find calendar pickers difficult to use. There should always be a simple way to enter dates in a text field when using calendar pickers.

Internationalization for date pickers

Internationalization refers to software adapting to different languages, regional peculiarities, and technical requirements of target locale without code changes. If location is known, formatting of date or time can automatically change to acceptable local format. Always try to design for internationalization.

Give your agent this brain