Question

I have a table that has a date input

<td style="background-color:#c6efce"><input type="text" id="datepicker0"></td>
<td style="background-color:#c6efce"><input type="text" id="datepicker1"></td>
<td style="background-color:#c6efce"><input type="text" id="datepicker2"></td>
<td style="background-color:#c6efce"><input type="text" id="datepicker3"></td>
<td style="background-color:#c6efce"><input type="text" id="datepicker4"></td>

I am trying to access it via for the first one

<script>
    $(function() {
        $( "#datepicker0" ).datepicker({
            showButtonPanel: true
        });
    });
    </script>

How do I access everything?

Answer 1

You could use the “attribute starts-with” selector:

$(function() {
    $("input[id^='datepicker']").datepicker({
        showButtonPanel: true
    });
});

That selector will match any input element whose id value starts with “datepicker”. An alternative would be to give all the required elements a common class.

You can also select multiple elements by id using a comma-separated list:

$("#datepicker0, #datepicker1, #datepicker2"); //List as many as necessary

But that’s not particularly scalable if you ever need to add more inputs.