I'm looking for the best way to display a date range in text that could potentially span across 2 lines. Currently I simply have something like "01-Jan-2013 -> 05-Jan-2013" with the arrow being an arrow icon.

This is fine when the start and end date are next to each other but if the text gets wrapped on to the next line this looks very messy and confusing.

What is the best way to represent start and end date ranges in a nice, quickly scannable way that wont look messy across lines?

Edit: Also the format of the text string is possible to change due to internationalisation

  • Do you just have to show the text or also allow the user to update the date as needed ?
    – Mervin
    Commented Feb 10, 2013 at 15:38
  • Just show the text. The input is done by a different user on different page. This is simply a summary box of an event. Commented Feb 10, 2013 at 15:43

1 Answer 1


This is the solution I have come up with so far.

Date range when displayed inline:

Date range when displayed inline

Date range when displayed across lines:

Date range when displayed across lines

If there are no better suggestions I will eventually mark this as the accepted answer

  • That's an excellent solution if it's not to lengthy. In general spelling things out like that is foolproof and my preferred solution. I would be careful to not make the dates look like buttons. They don't have to be inverted like that, just a subtle background shading to group it into a term and reinforce the contiguousness.
    – obelia
    Commented Feb 10, 2013 at 17:04
  • Compared to the rest of the page, these elements look "inset" while buttons "pop out" so I don't think there will be any confusion. (Cursor is set to pointer over a button anyway so a quick hover will relive any confusion) Commented Feb 10, 2013 at 18:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.