Best Format for Ranges on a Form: Vertical or Horizontal?

Question

In our system, we have long forms used for data entry. Our entry fields, checkbox controls, and combo boxes are always listed down the left side of the screen in one column.

Our persona deals with these long forms and data entry all day; therefore, they are used to seeing one column of data entry.

In the example below, our persona wants to run a report for any check dates that fall between 7/1/16 and 6/30/17.

Should date range fields be vertical with two labels or horizontal with one label?

A or B?

Answer 1

Putting the fields side by sides with the labels above the fields is a more standard approach than A or B (see the Material Guidelines).

You can see this on all sorts of sites that use date ranges, for example, travel sites. Something like this may work for you. If there are no other dates, then these labels should be sufficient (you could test with users and see if they understand).

Additionally, the NNGroup has a good read on date inputs.

^{download bmml source – Wireframes created with Balsamiq Mockups}