Date & Time
Overview
The Time pattern is created to help the time display across the board. The LeafyGreen offers three different components Time Format, Time Input, and Date Picker to be used to display date and time. For learn additional context on this pattern, please visit our FAQ page.
Product Implementation
Please follow the below table for recommendations on each product area.
Date/Time Components
Time Format
We are offering Time Format component in LG library to make it easier for designers to input the time stamp into the UI. This component has a Inline Definition and a Tooltip that with a pre-defined time format. General rule for the time format is to follow three-letter-month, day, and a year followed by hours, minutes, seconds and AM or PM, followed the timezone label at the end. Either the date or time along with seconds could be removed depending on the use cases.
NOTE: Technically, UTC should be paired with the 24-hour time format (instead of AM/PM). However, users set the time zone (at the project level) and the time format (at the personal level) separately. Since the defaults are set to UTC and AM/PM, users are more likely to see a combination of UTC and AM/PM.
Time Input
The Time Input component is used to provide users with a more efficient and flexible way to input time manually. This component will help the overall user experience by supporting keyboard entry.
Date Picker
The Date Picker component allows users to select a date or date range through a calendar interface. By default, the input uses the MM/DD/YYYY format for easier numeric entry, but this can be customized based on user preferences in their settings.
General Guide
Default Time Format
We recommend using the following format as the system default to align with user preferences and to reduce confusion when users are collaborating with international teams. While this format will appear by default, users will have the option to choose a different date and time format in their user preference settings. It is important to display the time zone at the end of every time stamp to make sure we inform the time to users correctly.
Displaying Single Digit Numbers
The leading zero should always be omitted in the date format if it’s a single digit. If the number is a single digit in AM/PM format, omit the leading zero.
If the number is following 24-hour format, leading zero should included in the hour.
Displaying the Day
We generally don’t recommend adding day into our time format but if it is necessary, place it in front of the month.
Ways to Display Multiple Time Zones
Atlas UI automatically displays the project time zone in UTC. If a user sets a personal time zone to view both, we offer three display options for showing multiple time zones, depending on the context.
Time Stamp
If a time stamp is displayed within the UI in the text, we recommend using inline definition to show personal time zone with a tooltip. We offer Time Format component in LG library.
Inputs
If it is displayed within the input components like the Date Picker or the Time Input, add secondary text below the inputs to show personal time zone up front.
Full Page
If the time is shown in the time table, secondary times will appear with inline definitions and tooltips. If the time is shown in a tooltip within Metrics, all times will be displayed within the tooltip frame. Displaying all three time zones is a rare edge case and will occur infrequently.
[Activity Feed]
[Metrics]
Text Wrap for Time Stamp
When displaying a time stamp in a horizontal constrained layout, allow it to wrap to two lines. Avoid truncation, as it’s important for users to see the full time information.
Different Use Cases
Use Case 1: Project Time Zone (UTC) + Personal Time Zone (N/A)
If a user has not set up the personal time zone, only the project time zone will be displayed with the default time zone UTC.
Use Case 2: Project Time Zone (CST/CDT) + Personal Time Zone (N/A)
If a user has set up the project time zone to CST, for example, both the project time zone and the UTC time reference will be displayed. UTC will always be displayed as a secondary reference if the default has changed to a different time zone.
Use Case 3: Project Time Zone (UTC) + Personal Time Zone (EST/EDT)
If a user hasn’t changed the project time zone and set up a personal time zone, it will display both and the personal time zone will be shown as a secondary information.
Use Case 4: Project Time Zone (CST/CDT) + Personal Time Zone (EST/EDT)
If a user updates both the project and personal time zones, the main display will reflect the new project time zone, with the personal time zone and UTC shown as secondary references.
Daylight Saving Use Case
When a time zone has daylight saving, show both abbreviated time zones in the dropdown. Directly show “CDT” or “CST” on the time stamp.
If the time zone doesn’t observe daylight saving time, omit the time zone abbreviation from the time stamp and include it only in the label.
