You can allow the user to pick a time and a timezone using the TimePicker and TimezonePicker components. Then use the handlers to get the selected time and timezone.
import{TimePicker,TimezonePicker}from'@jutro/components/new'; exportfunctionDinnerTimeSelector(){ functionhandleTimeChange(event, value){ console.log('The user selected the following time for dinner:', value); // displays: { hours: 19, minutes: 30 } } functionhandleTimezoneChange(event, value){ console.log('The user selected the following timezone for dinner:', value); // displays: { timezone: 'Europe/Warsaw' } } return( <> <TimePicker label={{ id:'time-picker-label', defaultMessage:'Enter dinner time', }} name="Dinner time picker" onChange={handleTimeChange} /> <TimezonePicker label={{ id:'timezone-picker-label', defaultMessage:'Set timezone for dinner time', }} initialValue={{timezone:'Europe/Warsaw'}} onChange={handleTimezoneChange} /> </> ); }
It is best to use the Intl.DateTimeFormat API to format the time picker value because:
Every time toLocaleString is called, it has to perform a search in a big database of localization strings, which is potentially inefficient. When the method is called many times with the same arguments, it is better to create a Intl.DateTimeFormat object and use its format() method, because a DateTimeFormat object remembers the arguments passed to it and may decide to cache a slice of the database, so future format calls can search for localization strings within a more constrained context.
The time picker component enables users to select a time from a dropdown. This component is commonly used in insurance applications where users need to specify a time, such as scheduling an appointment or setting a reminder.
Help text (optional): Gives extra context or helps the user choose the right selection.
Dropdown input: Displays the user selected option. Users can type inside the input field to find an option that matches their query. They can also input a custom time.
Dropdown menu: Displays a list of times to choose from.
The time picker component can accommodate both a 12-hour clock and a 24-hour clock. Use the format that corresponds to the region in which your product is available. For example, the United States uses the 12-hour clock.
In a 12-hour clock system, the 24-hour day is divided into two periods, "AM" and "PM", and each period consists of 12 hours.
The format of the day period marker is determined by the user's locale. Developers have no control over it. For the en-US locale, the default way to write the day period marker is "AM" and "PM".
The format of day period marker is determined by the user's locale. This example is using the en-US locale.
Jutro accommodates dropdown menus with typeahead input fields. Users can manually enter text to filter the dropdown items. This feature is useful for helping users select from a long list.
Dropdowns with typeahead enabled provide suggestions as users begin typing. Selections appear based on the characters that users have entered. The more characters that users input into the field, the more refined the list becomes.
A time picker can include an input control for time zone. The time zone picker also supports typeahead functionality, enabling users to filter through the list of options.
Don't put placeholder text in the input field. Placeholder text strains users' short-term memory because it disappears once a value is entered. It also poses additional burdens for users with visual and cognitive impairments.
Instead, place hints and instructions, including formatting examples and requirements, outside of the field.
The input field for time picker follows the content guidelines for text fields.
Error message text tells a user how to fix the error. In the case of the time picker, errors are often related to something that must be fixed for in-line validation.
Invalid fields must be clearly marked. In pickers with more than one field, set the invalid state on the individual field that is triggering the error.
Use sentence case for error text. Write 1-2 short, complete sentences that end with a period.
Do use error text to guide the user and show them a solution.
Don't write ambiguous error messages or leave users guessing as to how to resolve a problem.
Use an asterisk (*) to indicate required fields. The asterisk precedes the field label. This helps users to easily locate which fields are required by scanning just the left-most character of the label.
Do use an asterisk to indicate that a field is required.
Don't use an asterisk to denote anything that is optional.
The time picker appears with no value (default), placeholder text, or a filled input.
Visual
State
Description
No value (default)
Indicates to the user that no value has been selected and there is no placeholder.
Placeholder
Indicates to the user that no value has been selected. The placeholder is greyed out.
Filled input
Indicates to the user that the input is filled with data.
The time pickers also has interactive states for enabled, focus, disabled, error, read-only, and display-only.
State
Description
Enabled
Indicates to the user that the element is enabled for interaction.
Focus
Indicates to the user which UI element in the system is focused.
Disabled
Indicates to the user that the input value can't be changed because of local factors. For example, a checkbox above the input field must be checked to access this input field. The user can take action to enable it by interacting with the page.
Error
Indicates that the user has made a validation error. Error text provides corrective feedback to users.
Read-only
Indicates to the user that the input value can't be changed because of outside factors. For example, lack of write access. The user can take action to enable it by, for example, contacting an administrator.
Display-only
The display-only state is used for two cases:
A UI element is used in display mode.
A UI element is displayed in edit mode, but is never editable.
This state was called “read-only” before.
The following image illustrates time picker interactive states.
The time picker is expanded and collapsed with SPACEBAR. Users navigate through the options using the arrow keys and select by means of the SPACEBAR or ENTER key.
The aria-labelledby establishes a programmatic association between the input field and its label. The WAI-ARIA attribute of aria-autocomplete='list' communicates that a list of choices will appear from which the user can choose, but the edit box retains focus. Selecting the 'required' option in Storybook adds both the 'required' and 'aria-required="true"' attributes to the input field.
This component adheres to the following criteria for color and zoom accessibility:
Color: The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.0 AA requirements.
Zoom: All content is visible and functional up to and including a zoom factor of 200%.
This component has been validated to meet the WCAG 2.0 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance. When using this component within your application:
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
The TimePicker component defines one translation key:
Key
Used for
jutro-components.fields.TimePicker.placeholder
the placeholder in the input field
The TimezonePicker component defines a translation key for each available timezone. The key always starts with jutro-components.fields.TimezonePicker, followed by the name of the timezone.
For example, for the Africa/Lagos timezone, the translation key ID is:
Time is formatted according to the selected locale. For example, if the locale is en-US, the time is formatted as "5:30 PM". If the locale is pl-PL, the time is formatted as "17:30".
Jutro inputs have implemented imperative handlers as a mechanism to provide access to some common native features that might be useful for you. The following features are available:
Set focus to allow you to set the user focus into a specific component
Blur to remove the focus from the component
Scroll to the component so that you can take the user to a specific area of the page.
These features are provided through the ref property, which exposes them as follows:
Although some Jutro components might provide complementary features or a helper function to facilitate the validation process, it is your responsibility as a developer to handle the validation of any user input (using or not using the complementary helpers) and to decide what error messages to show.
Jutro components behave based on the developer implementation.
When are error messages displayed?
Error messages are only displayed when you pass them to the component through the stateMessages property. This property receives an object with the following content:
The component displays every error message provided in the same order as in the array.
When does validation occur?
This is your decision as a developer. As components do not determine when the validation is performed or when the error must be displayed, you need to implement the logic to handle it according to the project requirements, for example while the user is editing the content, when the component loses focus, and on form submission.
If the user enters an invalid time, or a time that is outside the min/max boundaries, they get a validation error as the third parameter in the onChange handler. The parameters looks like the following:
{ errorCode:ERROR.<ERROR_CODE_GOES_HERE>, }
The error code can be one of the following:
INVALID_TIME - when the user enters an invalid time, for example "25:67 AM".
MIN_TIME_EXCEEDED - when the user enters a time that is before minTime.
MAX_TIME_EXCEEDED - when the user enters a time that is after maxTime.
Anatomy of the time picker component.
The format of day period marker is determined by the user's locale. This example is using the en-US locale.
