Dates and Times
The presentation of dates and times is one of the most foundational elements of all Infor systems. Carefully think about how to use formats and user interface placements that provide users with engaging and accurate workflows.
Here are UX writing best practices and guidelines to best meet those needs, along with recommended quickstart examples of usage.
Best Practices and Guidelines
- Clarity and readability: Ensure that the date and time format is intuitive and easily readable at a glance. Use a format and style that makes it easy for the user to distinguish between day, month, and year; hours, minutes, and seconds.
- Consistency: Always be consistent with a date and time format within a component’s interface. For example, if you use the standard numerical month, day, and year with a slash separator (MM/dd/yyyy) format in a data grid, use that format consistently within the grid itself, as well as in any other data grids shown in that platform or workspace.
- Contextual information: Provide contextual information with the date, such as the day of the week—yesterday, today, tomorrow—to help users orient themselves and more intuitively grasp the timing of events or actions.
- Roles and responsibilities: Think about the demands of specific roles and responsibilities. The crucial presentation of dates and times is key to a user successfully meeting the demands of their job on a consistent basis. Consider how frequently a task or a role requires the date and time to be refreshed and updated.
- Interactive date and time components: Use relevant Infor Design System (IDS) components, such as the calendar and datepicker, to engage users and easily select, input, or modify dates and times.
- Real-time updates (optional): Consider providing dynamic real-time updates for UIs that display time-critical things such as current events or deadline/schedule changes.
Quickstart Date Formats
Do
04/16/2024
16/04/2024
Apr 16, 2024
16 Apr, 2024
Tue, Apr 16 2024
Tue, 16 Apr 2024
Don’t
04/16/24
16/04/24
Apr 16, 24
16 Apr, 24
Tue, Apr 16, 24
Tue, 16 Apr 24
Data Grids Tell a Story Over Time
Date formats for data grids:
| Localization Examples | Format |
|---|---|
| USA: 06/21/2024 | MM/dd/yyyy |
| UK or Europe: 21/06/2024 | dd/MM/yyyy |
| USA: Jun 21, 2024 | MMM dd, yyyy |
| UK or Europe: 21 Jun, 2024 | dd MMM, yyyy |
Time formats in other regions of the world may use different separators other than a slash, such as a dash, period, comma, or space.
Data grids tell a story over time and are a valuable way to show the repetition of an activity, process, or event.
- The dates presented in a column have a relationship to one another that tells an important story to the user, who relies on it for their workflow.
- To tell that story, it’s crucial to effectively show the relationships in time between events, including things or tasks, and the workflow patterns they reveal.
Examples of serial relationships: Dates in a data grid column.
Milestone Events
Milestone events are standalone events such as one-time deadlines, anniversaries, meetings, and other special occurrences that aren’t part of a cycle of ongoing repeated events (such as in a data grid).
Consider using the full month or the abbreviated month when a widget, page, or other interface meets two conditions:
- There’s enough space.
- It’s for a major milestone, such as an expiration date, deadline, anniversary, or other important standalone event.
Do
Invoice approved on April 2, 2024
| Day of the Week Used for Current Week | Format |
|---|---|
| USA: Thu, Apr 4 2024 | EEE, MMM d yyyy |
| USA: Thursday, Apr 4 2024 | EEEE, MMM d yyyy |
| UK or Europe: Thursday, 4 Apr 2024 | EEEE, d MMM yyyy |
| Present week: Thursday, April 11 2024 | EEEE, MMMM dd yyyy |
| Prior week: April 4, 2021 | MMMM d, yyyy |
Current Week or Same-Day Date Formats
When an important date falls on the current week, use an abbreviated month and day of the week. The full month and the day of the week is also supported, if necessary.
- Month abbreviations (first three letters): Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
- Day of the week abbreviations (first three letters): Mon, Tue, Wed, Thu, Fri, Sat, Sun
- If a feature, task, or tool can be modified and/or saved, include:
- “Last modified” or “Last saved” labels.
- A timestamp that includes the hour and minute, using the following patterns:
- Example (US): Last modified: Nov 4, 2021, 4:42PM
- Example (UK/Eur): Last modified: 4 Nov, 2021, 16:42
- If the timestamp describes an action that occurred on the same day, use the word “Today” in lieu of the month, day, and year. (See chart below.)
| Day of the Week Used for Current Week |
|---|
| USA: Last modified: Today, 4:42PM |
| UK or Europe: Last modified: Today, 16:42 |
| USA: Last modified: Yesterday, 4:42PM |
| UK or Europe: Last modified: Yesterday, 16:42 |
Timestamps (General Usage)
Generally, use numbers with a timestamp.
- Abbreviated (first three letters) month day, year, hour:minutesAM/PM
Do
Example (US):
Apr 4, 2024, 4:42PM
Do
Example (UK/Eur):
4 Apr, 2024, 16:42
Date Ranges
- If there are space constraints, use 3-letter abbreviations.
- Examples: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
- Localize the date format for the country in which it will be used.
- Example (UK or Europe): 07 Nov 2021
Due and Overdue Dates Formats
Use the following formats for showing items that are due:
- Due date:
- If it’s due in less than 7 days: Due in 5 days
- If it’s due in more than 7 days, use the full date: Due June 21, 2024
- Overdue:
- If it was due less than 7 days ago: XYZ overdue X days ago
- If it was due more than 7 days ago: XYZ overdue since June 1, 2024
Inputting Dates
The numerical date format—including the country and regional month, day, and separator variations—is the universal international standard for inputting a date. For the United States, it’s: MM/dd/yyyy
Use the Date Picker component. See examples.
Date Format Examples Used with IDS Code
When providing examples for component labels for inputting dates in form fields (predominantly, although there are other components, such as contextual action panels), and providing the user with examples of how dates should be input for various uses, here are inputting formats that correspond to the IDS code, examples of their appearance, and descriptions. Please take special attention with space, slash, dash, and period separators.
| Format | Example | Description |
|---|---|---|
| MMM d, yyyy | Feb 4, 2024 | Three-letter abbreviation of the month and one-digit day with a comma and a four-digit year with line-space separators. |
| d MMM yyyy | 4 Feb 2024 | One-digit day and three-letter abbreviation of the month and a four-digit year with line-space separators. |
| dd/MM/yyyy | 04/02/2024 | Two-digit day and a two-digit month and a four-digit year with slash separators. |
| m/d/yyyy | 2/4/2024 | One-digit month and 1-digit day with a four-digit year with slash separators. |
| MM-dd-yyyy | 02-04-2024 | Two-digit month with a two-digit day and a four-digit year with dash separators. |
| MM/dd/yyyy | 02/04/2024 | Two-digit month with a two-digit day and a four-digit year with slash separators. |
| MM.dd.yyyy | 02.04.2024 | Two-digit month with a two-digit day and a four-digit year with period separators. |
| yyyy-MM-dd | 2024-02-04 | Four-digit year with a two-digit month and a two-digit day with dash separators (ISO-8601 standard). |
| yyyyMMdd H:mm:ss | 20240204 10:07:15 | Four-digit year, two-digit month, and two-digit day. Two-digit hour, two-digit minutes, and two-digit seconds. Use a line space separator between the date and time. |
| yy/MM/dd | 24/02/04 | Last two-digits of year and two-digit month with a two-digit day with slash separators. |
| dd/MM/yy | 04/02/24 | Two-digit day, separator, two-digit month, separator, last two digits of year with slash separators. |
| yy/MMM/dd | 24/Feb/04 | Two-digit year with a three-letter abbreviation of the month and a two-digit day with slash separators. |
| H:mm:ss | 09:51:15 | Standard hour: Two-digit hour, two-digit minutes and two-digit seconds with colon separators. |
| dd MMM yyyy | 04 Feb 2024 | Two-digit day and three-letter abbreviation of the month and a four-digit year with line-space separators. |
Translation and Localization Considerations
Please reference the IDS code for your country or region.
- Retain the three-letter month abbreviation formats specified above, if possible. Refer to the applicable IDS code for the required language.
- Consider using the abbreviated or full month name when a widget, page, or other interface represents a milestone (see above).
- The numerical date format (including the country and regional month, day, and separator variations), is the international standard.
- A forward slash is the standard separator type for the US and the UK, but some countries use dashes, periods, or spaces between the month, day, and year. Check the format for the country you’re working on. The IDS-Code for dates and times in other countries is preformatted to use the correct separator type for each locale for system supplied dates, but UI copy needs to be written in the correct format.