Patterns
Date & time
Date and time formats are used as timestamps on messages, dates within the calendar and to help the user understand when something happened.
Moment.js is used to render the time and date formats in Sprout Social. While the library provides more formats, the versions outlined in this page should be the formats used. The library also provides international formats for all dates and times, therefore examples on this page will only address English-speaking, US formats.
Best practices
- When referring to a different time zone, include the abbreviated version of the time zone, e.g. Today at 1:25 pm CDT.
- When using relative time, at some determined point, the date will switch to the month, day, year or numerical format. e.g. Today at 1:25 pm would switch to Aug 16, 2019 1:25 pm or 8/16/2019 1:25 pm.
Date formats
Dates may be formatted in the following ways:
| Format | When to use | Example |
|---|---|---|
| Month, Day, Year | When referring to a specific day of the month | Aug 16, 2019 |
| Numerical | Space saving format for day of the month | 4/29/2019 |
| Weekday | When referring to a specific day of the week | Fri, Aug 16, 2019 |
| Weekday, Numerical | Space saving format for day of the week | Fri, 8/16/2019 |
Time formats
Times my be formatted in the following ways:
| Format | When to use | Example |
|---|---|---|
| Time | When referring to a specific point in time | 1:25 pm |
| Time + Time Zone | When time zone is required | 1:25 pm CDT |
Date & time
Times can be appended to any Date Format, except Calendar formats:
| Format | When to use | Example |
|---|---|---|
| Month, Day, Year | When referring to a specific day of the month and timestamp | Aug 16, 2019 1:25 pm |
| Numerical | Space saving format for day of the month and timestamp | 4/29/2019 1:25 pm |
| Weekday | When referring to a specific day of the week and timestamp | Fri, Aug 16, 2019 1:25 pm |
| Weekday, Numerical | Space saving format for day of the week and timestamp | Fri, 8/16/2019 1:25pm |
Date & time ranges
Date and time ranges may be formatted in the following ways:
| Format | When to use | Example |
|---|---|---|
| M/DD/YYYY — M/DD/YYYY | When referring to dates from date picker | 6/10/2019 — 6/20/2019 |
Special cases
There are special use cases for time and date formats, those should only be used in the specific behaviors outlined:
| Format | When to use | Example |
|---|---|---|
| Month, Year | For use in Calendar (month view)* | April 2019 |
| Day Name | For use in Calendar (month view)* | Thursday |
| Day Name, Numerical Day | For use in Calendar (week view)* | Thursday 28 |
| Computerized | For use in CSV exports | 2019-08-15 1:25 pm |
| Time Zones* | For use when time zone is required | CDT |
| Duration Time on Graph Axes | For use when graphing duration e.g. YouTube Average View Duration graph | 3:45 (MM:SS) |
| Duration Time in Table/Card View | For use when referencing duration time e.g. Inbox Team Report, YouTube Videos | 1d 5h 3m 45s |
| Exported Duration Time | For use in CSV exports when referencing duration time (unit is in minutes) | 365.50 |
*Time Zone can be appended to any time & date format.
Relative Time
There are other ways to refer to date and time, these may be formatted in the following ways:
| Format | When to use | Example |
|---|---|---|
| Hours | When referring to the hour or hours past, up to 24 hours ago | an hour ago 2 hours ago 24 hours ago |
| Day | When referring to the day or days past, up to 7 days ago | a day ago 2 days ago 7 days ago |
| Today | When referring the current day | Today at 1:25pm |
| Yesterday | When referring the previous day | Yesterday at 1:25 pm |
| This | When referring to the current year, month, week, day | This year This month This week This Friday |
| Last | When referring to the previous month, week, day | Last month Last week Last Friday |
| Future | When referring to a month, week, day in the future | 3 days from now Tomorrow at 1:25 pm |