So I have a date range, for example:

21-05-2022 - 27-05-2022

Bear in mind that the date is in dd-mm-yyyy format. So my user wanted to add the "Start Date" and "Due date" before the date. So it becomes like this:

Start date: 21-05-2022 - Due date: 27-05-2022

I don't think that's right (at least according to my gut), if you want to use labels I think you need to put line breaks like so:

Start date: 21-05-2022
Due date: 27-05-2022

What do you think? I need some validation for this to present to them. Thank you


For more context, this is supposed to be displayed in a web page I'm working on. So I'm currently working on a web page, mostly text, with a layout like so:

Start Date: 07-04-2022
Due Date: 17-04-2022

Header 1


It's not about displaying a date range picker component, it's just displaying the date text. In fact, the date cannot be changed (at least in this page)

5 Answers 5


My assumption here is what users need is to scan, read and compare the dates. To achieve this, in the following example I used alignment, a monospace font for the dates and larger text size for them to make them stand out a bit better opposed to their label. Those are just examples of what you can do to make it more usable.

enter image description here

Or horizontal ...

enter image description here

  • I think this is the acceptable answer for me. Especially when you demonstrated the horizontal version. Thank you so much! Commented Apr 10, 2022 at 3:37

From where did you get putting dates in the same line is not correct? Nearly all travel websites have the dates arranged in a line, which, in addition to following the reading order from left to right in continuity with the rest of the information, perceptively helps to better interpret which is the beginning and which is the end .

What you can propose is placing the label on top:

enter image description here

  • I'm sorry I didn't put more context. I've updated my question above with the current situation I am currently on. Commented Apr 8, 2022 at 1:32

Listing labeled individual dates (your example) is correct. Showing a date range with a general label like "Time frame" is correct. Labeling both dates in a range (at least in American English) is incorrect.

If your company is large enough to have a copy editor, head of content, or tech writer on staff, this is something with which you should enlist their help. They are likely going to have a style guide that is considered the source of truth for your company.

  • Unfortunately I don't have any of those people to reach out for, hence I am asking it here :D Commented Apr 8, 2022 at 1:34

If one looks at travel booking sites, or doctor appointment sites, or pregnancy due date caluculators, the date format is dd-mm-yyyy presented in the same line. I guess this is the industry standards and the users are familiar with this way of functioning. Hence this becomes a control variable. In UX research, particularly, during the usability tests when we test new features of a product design control variables play a huge part as familiarity with the function or a feature makes the users tasks less cumbersome.

  • I'm sorry I didn't put more context. I've updated my question above with the current situation I am currently on. Commented Apr 8, 2022 at 1:33

Related data like a period, a start and end, an interval or however you want to call it, is based on the same basic rules on the language/region of the application/website. Most of the world like US/Europe are used to analyzing data from left -> right and top to bottom, but 1st and most important is LEFT to RIGHT. (If you would build something for Japan it would be different).

So, if dates are part of an interval/period and related, it would be best to place them next to each other on the same line, because a period can be compared with a "sentence", and it makes sense to be displayed and read in one go.

So it's natural to have Date 1 followed by a Date 2 which is an event further in time related to Date 1.

How to place the label that's up to your design/consideration.


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.