Date Time Inputs

There are a variety of components designed to support any of the date and time inputs your application may need. Date Time Inputs are used when a user needs to enter a specific date or time. Date Pickers provide a calendar that the user can navigate to find the date they are looking for. All components are designed to be flexible within whatever locale they are used in. You can configure the locale using the Configuration component.

Date Input

The Date input component allows a user to enter a specific date via the text field that is protected by a mask to ensure the date format is correct. This component is also capable of opening a calendar for the user to select a date without typing it in.

Week Input

The Week input component allows a user to enter a week number and year. The user input is protected by a mask where the format is Week {ww}, {yyyy}. If a user enters a value greater than 52 for week number, the week number will default to the user's value minus 52 and will adjust the year accordingly. This component does not support multiple locales. This component is also capable of opening a calendar for the user to select a week without typing it in.

Month Input

The Month input provides dropdowns to allow a user to select a month and year. This component supports locale to control the language of the month displayed, but the locale does not affect the format of the input.

Day of Week Input

The Day of Week input provides a dropdown to allow a user to select a day of the week. This component supports locale to control the language of the day displayed and the order in which days should be presented.

Time Input

The Time input provides a text field where users may enter the time following the specified format. By default, the user is expected to enter hours and minutes, but may also be required to enter seconds if the withSeconds prop is enabled. The en-US locale also provides the user with a dropdown to select AM or PM. This component may open a time picker with predefined intervals to select a time without typing it in.

Date Time Input

The Date Time input is a combination of the Date input and Time input.

Date Range Input

The Date Range input component uses two Date inputs. It allows user to select a range between two dates. This component is also capable of opening a date picker with a calendar for each input. The date picker allows user to select range without typing dates in.

Duration Input

The Duration Input represents the duration property. It has two modes of defining duration: using specific time units (seconds, minutes, hours, days) or hh:mm:ss format. These are interchangeable and affect only the form of the value.

Required

If the Date Time component is required, you should pass the required prop. This will prevent any Form submission until the required selection is made.

Disabled

You may wish to disable a Date Time input in order to prevent a user from entering or editing any information while some task is being completed, or to restrict a user's access.

Read only

If you want to render information that has already been entered for viewing purposes only, use the readOnly prop. The user will not be able to edit the Date Time input if it is read only.

You may want to add some styling to a Date Time component based on the outcome of certain user actions. The color schemes for the following statuses can be controlled via components['form-field'] in the Theme. In Cosmos, a success status isn’t typically presented to the user because it is possible that the field will pass client-side validation but may fail when checking against server-side validation.

Warning

Error

The Date Picker component is useful when a user may not know the exact date that they wish to enter. They will have the ability to navigate through a calendar by month and year to pick the exact date, or multiple dates, that they are looking for. The picker works in two modes allowing users to select the exact date or ISO week.

The Time Picker component is great when a user may want to quickly select the time from predefined options. By default, the options interval is set to 30 minutes, but this may be changed with the interval prop. This component supports locale to control 12/24h clock format.