Displaying a date range with labels, what is the best practice?



  • 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

    UPDATE:

    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:

    TITLE OF THE TASK
    Start Date: 07-04-2022
    Due Date: 17-04-2022
    

    Header 1

    Content...

    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)



  • 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




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2