Date/Time Picker Component

A date/time picker is a component that allows a user to select a date and a time within an application.

What is a date/time picker?

A date/time picker is a way for users to specify a date and time, and can be used in a number of versatile ways. Some pickers only allow for a date or time, whereas others, like scheduling apps, support both at once.

Date pickers

A date picker usually displays a calendar when clicked, allowing users to select a date by clicking on a calendar date. Date pickers with a range often default so that the first date that is clicked is the beginning of the range, and the second date that is picked is the end of the range.

Time pickers come in numerous forms as well:

Time pickers

Scheduling apps usually display a dropdown of 15-minute increments, which works in tandem with a range variable that determines how long of a time is selected.

Time pickers that don’t require a range, but rather one specific time, will often feature a three-column layout, with 1-12 on the left, 00-59 in the middle, and an AM/PM toggle on the right.

Internal’s date/time picker component

In Internal, a date/time picker component can be used to filter a table, or in conjunction with a form or button component as part of a larger system. For instance, a date/time picker component can be added to a form, and will record the selected date/time upon form submission.

You can also set a default value for your date/time picker, like the current date and time.

For more information or help getting started, check out our date/time picker component documentation.