DateTimePicker

Pickers are used to select past, present, or future dates or times. Each picker’s format is made out of other components and can be customized depending on the product need. The date picker component is capable of rendering a date picker, time picker, or combinations of both. Each picker includes documentation for usage, component structure, interactions and accessibility.

🚧 Under construction

This component is under active development. If you need this component for your project, create an issue in the GitHub repo.

Features

Form component that facilitates selecting a date, a time, and a date/time combo.

#DatePicker

Date pickers let users choose or input dates wherever dates need to be selected across Arc. The date picker is used throughout Arc, in areas where the user selects a date(s). When opened from an empty state, date pickers default to showing today’s date and only one month is shown at a time. Date pickers allow users to navigate through months and years; however, they work best when used for recent or near future dates. Common use cases include:

Setting a publish time
Filtering content
Scheduling a task
Defining start and end dates
Credit card payment date

#Full dates (mm/dd/yyyy)

Label
TextField interactive icon
Closed chevron year selection menu
Month pagination
Date outside current month
Current date
Selected date
Hover/Focus state

Opened year selection menu
Past year
Hover/focus year
Current year
Selected year

#Date and year (mm/yyyy)

Label
Input interactive icon
Month pagination
Scroll
Current year
Selected year
Hover/focus year
Past year
Selected month
Input selected date

#Time Picker

Time pickers allow users to enter or select a specific time value. Time pickers provide the user with a text field in which they can input the hour, minutes and in some cases seconds. Additionally, the time picker comes in 24 hour format or 12 hour format with the option to select a.m. or p.m. . The time picker comes with variations of hours, minutes and second intervals. Common use cases include:

Setting a publish time
Filtering content
Scheduling a task
Defining the start time and end time

#12-Hour time (12:34)

Label
TextField interactive icon
a.m./p.m. selection button
Increment hours/minutes
Decrement hours/minutes
Timezone

This picker also supports seconds when needed

#24-Hour time (16:34)

Label
TextField interactive icon
Timezone
Decrement hours/minutes
Increment hours/minutes
Timezone

This picker also support seconds when needed.

#Selecting date and time

Date pickers let users choose dates from a visual calendar that’s consistently applied wherever dates need to be selected across Arc. Date/Time pickers provide the user to select a date and a time. The picker should be used when both time and date are needed and have the same function and interactions of the separate date and time picker. Common use cases include:

Setting a publish time
Filtering content
Scheduling a task
Defining the start time and end time

This picker can also support 24 hour format seconds when needed.

#Accessibility considerations

When you use the date/time picker component, always give users the option to enter the date and time using a text field component as well. Accessibility allows users of diverse abilities to navigate, understand, and use the UI. Some users might find interacting with date/time pickers to be challenging. Outlined is the keyboard functionality.