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.)
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 Improve this question edited Feb 1, 2012 at 3:06 Charles Sprayberry 7,8633 gold badges42 silver badges52 bronze badges asked Aug 25, 2009 at 10:14 Tom DaviesTom Davies 1,8903 gold badges16 silver badges19 bronze badges 3-
1
I don't follow your question. The jQuery you wrote there is perfectly valid: it will loop through all input elements with a class of
.date-pickand attach a datepicker control. Why do the names have to get involved? – VoteyDisciple Commented Aug 25, 2009 at 10:19 - Votey, see my ment on T.J. Crowder's answer below – Tom Davies Commented Aug 25, 2009 at 10:40
- @meta: ...and see my reply. :-) – T.J. Crowder Commented Aug 25, 2009 at 11:26
3 Answers
Reset to default 4Your code should work as it is. However, you could loop through by name like this:
$("input[name*='field_id_'].date-pick").each(function(){
$(this).datepicker({dateFormat: "yy-mm-dd"});
});
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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DatePicker Test Page</title>
<script type="text/javascript" src="http://jqueryui./latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui./latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui./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>
have you tried something like
var namefield = "field_id_"
$("date-pick").each(function(index, element) {
if ($(element).attr("name").substr(0,namefield.length) == namefield) {
// code to process
}
});