Home/ Questions/Q 342537
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T10:48:49+00:00

Thanks for taking the time to read this. I have an unknown number of

  • 0

Thanks for taking the time to read this.

I have an unknown number of (dynamically inserted) input elements in a form, to each of which I want to attach the datepicker widget included in jQuery UI.

All of the input elements that I want to attach the datepicker to have a class of “date-pick”. Obviously because we have more than one matching element we need more than just a class name so that the date value gets returned to the originating field rather than just the first match.

Ordinarily I’d probably just do something like:

$("input.date-pick").each(function(){
    $(this).datepicker({dateFormat: "yy-mm-dd"});
});

However in the code I’m working with, the input elements do not have unique IDs until the form data is saved (something that I’m unable to change), though they do have unique name attribute values of the format name="field_id_x[y][z]" which, when the form is saved then gets converted to an id of the format id="field_id_xyz".

So my question is, can anyone show me how to loop through all the input elements with a class of “date-pick” based on their name attribute values?

(PS It might also be worth mentioning that the number of matching input elements in the form can be increased/decreased by the user on the fly.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The date picker doesn’t need the elements to have an ID. You’re already looking up the elements for it. This should work:

    $('input.date-pick').datepicker({dateFormat: "yy-mm-dd"});

    Note you don’t even need the each call.

    Complete example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DatePicker Test Page</title>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type='text/javascript'>
$(function() {
    $('.dp').datepicker();
});
</script>
</head>
<body>
<hr />
<input class='dp' type='text'>
<input class='dp' type='text'>
<input class='dp' type='text'>
</body>
</html>
    • 0