Same date for multiple Date inputs

Question

I have a HTML Table with just two columns.

` Order # Date

 <tr>
     <td>12345</td>
     <td><input type="date" id="row1"></td> 
 </tr>

  <tr>
     <td>67890</td>
     <td><input type="date" id="row2"></td> 
 </tr>

`

The right column is a Date that is respective to an Order #.

We may have several rows and it's possible that lots of consecutive rows will have the same Date.

What are some ideas on how to select 1 Date but apply it to multiple rows?

I thought about using checkboxes and one "multiple Date" Picker and then some kind of confirm button. But - I think this is kind of clunky and then adds more to code needed too.

Thanks!

https://datatables.net/extensions/autofill/examples/initialisation/fills.html is a way to do it. You can drag a value in the 'Start Date' column and apply it to other cells.

However, I'm not using DataTables for this particular Table.

https://jsfiddle.net/pqy8xev3/6/ is a proposed way to do it. However, as stated above, I'm not too keen on it. Especially as the number of rows grow.

Answer 1

There might be a specific use case where it makes more sense to select the date and then applying it to multiple rows but typically you would be selecting multiple rows and applying a date to it.

This is because the process of selecting a date through a calendar widget (or entering it directly) involves a little bit more thinking and processing, which means changing a date takes more effort than changing a row value.

And then you have to create some additional interaction where you apply this to different rows and then making sure that this is done correctly.

The alternative of simply selecting multiple rows and then applying a date to the selection fits with standard design patterns and can save you and the users some hassle.

However, each use case should be tested and validated against user needs, so there might still be a particular reason why you still need to select a date and then apply it to multiple rows.