I have a HTML Table with just two columns.

` Order # Date

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

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


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.


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.

  • 1
    I suggest providing a simple mockup rather than the HTML to give people some ideas about potential constraints or requirements.
    – Michael Lai
    Commented Jul 15, 2021 at 0:47
  • 1
    @MichaelLai I added a jsfiddle. Please see Commented Jul 15, 2021 at 16:39
  • 1
    Just to clarify, is there any reason why you don't want to select multiple rows and then apply a date to it? It might work differently to selecting a date and applying it to multiple rows but potentially be better.
    – Michael Lai
    Commented Jul 16, 2021 at 2:11
  • @MichaelLai Simple just never thought of doing it the opposite way :). That's definitely better in my opinion Commented Jul 16, 2021 at 13:37

1 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.

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.