Balance Logo
Balance
Reckon Design System

Date & time

Date and time formats are used as timestamps on pay runs, dates within the calendar, employee milestones, and to help the user understand when something happened.

The date-fns package is used to render the time and date formats in Balance. While the library provides more formats, the versions outlined in this page should be the formats used. The library also provides international formats for dates and times, these examples will only address AU 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 AEDT. 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 16/08/2019 1:25 pm.

Date formats

Dates may be formatted in the following ways:

FormatWhen to useExample
Month, Day, YearWhen referring to a specific day of the month16 August, 2019
NumericalSpace saving format for day of the month16/08/2019
WeekdayWhen referring to a specific day of the weekFriday, 16 August, 2019
Weekday, NumericalSpace saving format for day of the weekFriday, 16/08/2019

Time formats

Times may be formatted in the following ways:

FormatWhen to useExample
TimeWhen referring to a specific point in time1:25 pm
Time + Time ZoneWhen time zone is required1:25 pm AEDT

Date & time

Times can be appended to any Date Format, except Calendar formats:

FormatWhen to useExample
Month, Day, YearWhen referring to a specific day of the month and timestamp16 August, 2019 1:25 pm
NumericalSpace saving format for day of the month and timestamp16/08/2019 1:25 pm
WeekdayWhen referring to a specific day of the week and timestampFriday, 16 August, 2019 1:25 pm
Weekday, NumericalSpace saving format for day of the week and timestampFriday, 16/08/2019 1:25pm

Date ranges

Date and time ranges may be formatted in the following ways:

FormatWhen to useExample
M/DD/YYYY — M/DD/YYYYWhen referring to dates from date picker6/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:

FormatWhen to useExample
Month, YearFor use in Calendar (month view)April 2019
Day NameFor use in Calendar (month view)Thursday
Day Name, Numerical DayFor use in Calendar (week view)Thursday 28
ComputerizedFor use in CSV exports2019-08-15 1:25 pm
Time Zones*For use when time zone is requiredAEDT

*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:

FormatWhen to useExample
HoursWhen referring to the hour(s) past, up to 24 hours agoan hour ago, 2 hours ago etc.
DayWhen referring to the day or days past, up to 7 days agoa day ago, 2 days ago etc.
TodayWhen referring the current dayToday at 1:25pm
YesterdayWhen referring the previous dayYesterday at 1:25 pm
ThisWhen referring to the current year, month, week, dayThis week, This month etc.
LastWhen referring to the previous month, week, dayLast month, Last week, etc.
FutureWhen referring to a month, week, day in the future3 days from now
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.