How to display a date & time if the date for reporting purposes differs from the actual date?

Question

How can I compactly display both a date and a time, but also handle the rare case where a date for reporting purposes is different from the actual date and time where an event occurred? For example, events at 11:55PM may be reported as if they happened on the following day.

Here's more details:

Our company's B2B app tracks deliveries made by delivery drivers. A typical report in this app will ask for a date range and return a grid showing fields like:

• Delivery Date & Time
• Customer Info (name, address, etc.)
• Driver
• etc.

There's an unusual case where some drivers start their day very early-- sometimes even before midnight. Others may start late and very rarely have long days that stretch after midnight.

But for reporting purposes, it doesn't matter that the actual delivery time was before or after midnight. If a delivery was part of Tuesday's schedule, then a report for Tuesday should include all deliveries on Tuesday's schedule, even if one actually got delivered at 11:55 PM on Monday night or 12:05 AM Wednesday morning.

So what should I do with date/time values shown in reports and in other parts of our app to indicate that the reporting date and the delivery date don't match?

In reports, I guess I could split the Date/Time column into Date and Time columns, and if the dates are different, then the time column should show this (e.g. "11:55 PM previous day" or "11:55 PM on 3/17/2015").

But splitting columns adds complexity for a very rare case that most users will never see. Is there a good way to show both the reporting date and the actual date/time in one column, so that only the complex cases get the complex UI?

Answer 1

This is a situation that has been well thought-through by travel websites who often come across the same problem: they need to show a timetable of flights departing on a given day, but some of the flights will land the next day.

As a result, this approach has been extensively tested:

If you don't want to use a multiline format, you can shorten the day tag to +1d and -1d and keep it on the same line as the time. If you do this, I would left-align the numbers so all the times are vertically aligned, then have the tags hanging on the right.