Date and time pickers
Description
Use the date and time picker to easily specify date and time values in input fields.
The top part of the picker is a banner which reflects the date and time information specified below. By default, the bottom part of the picker contains a monthly calendar. In addition to the monthly calendar, the picker can include the ability to specify a year, a clock to specify a time, and, for time values which are not in the 24-hour format, an option to indicate whether the time is in the AM or PM.
When to use
Use whenever you need the user to input a date or time value. This functionality complements the ability of the users to enter the date and time by typing in the input field. Both should always be available.
Consider which of the variations you will need when including the date and time picker. For example, do not display the year or the clock view when specifying a birthday.
Variations
Depending on the functional requirements and system settings, the following picker variations are supported:
- Year, month and date, time, AM/PM indicator
- Year, month and date, time in 24-hour format
- Year, month and date
- Month and date (This is used for anniversary dates such as birthdays.)
Interactions
The date and time picker is accessed by clicking the calendar icon in an input field. The input field remains active when the picker is open. Any changes in the picker are immediately reflected in the input field and any changes in the input field are reflected in the picker.
- Click the year in the picker banner to open the year view. In the year view, use the scroll bar to navigate earlier or later and click the year to select.
- Click the month, date, or day of the week in the picker banner to open the monthly calendar view. In the monthly calendar view, use the left arrow and right arrow to navigate earlier or later and click the date to select.
- Click the minutes in the banner to open the minute clock. In the hour clock and the minute clock, click the value to select.
- Click the hours in the banner to open the hour clock. In the hour clock and the minute clock, click the value to select.
- Click AM or PM in the banner to select that value.
- Click OK to save the changes. The picker closes and the changes are reflected in the input field.
You can always change or specify the values in the input field by typing in it, without opening the picker.
Specifications
