jQuery Datepicker how to dynamically add IDs to input field

Question

I have a form with multiple input fields that use datepicker. I have just created IDs for them and this has worked fine but now I need to use it in an instance where there are multiple forms shown on the same page.

Is there any way to create a jQuery function that will dynamically add an ID to any element with the class of "datepicker" and make the datepicker work on theses elements?

Something like:

$('.datepicker').append('ID','datepicker + (1)');
$("#datepicker + (1)").datepicker();

I know this will not actually work but I thought it was the easiest way to explain, the +(1) suffixes a number to the ID.

My current code for the static elements works like this.

$("#datepicker").datepicker();
$("#datepicker01").datepicker();
$("#datepicker02").datepicker();
$("#datepicker03").datepicker();
$("#datepicker04").datepicker();
$("#datepicker05").datepicker();
$("#datepicker06").datepicker();

Thanks for the help, cheers :)

Hi that does work fine but that's with a static page where I've put the IDs in myself. I need it for a page where the script will find all elements with a class of "datepicker" and then add a unique ID and make the datepicker function work on those elements. — Clinton Green
– Clinton Green, Commented Apr 23, 2012 at 2:21
Um, $('.datepicker') already selects all elements with the datepicker class. — mu is too short
– mu is too short, Commented Apr 23, 2012 at 2:23
I know, but I need to dynamically generate the IDs because I wont know how many fields I will need the functions for. It could be for 3 or even 30 fields. — Clinton Green
– Clinton Green, Commented Apr 23, 2012 at 2:26

mu is too short · Accepted Answer · 2012-04-23 03:04:52Z

4

You don't need the IDs at all, you can just bind them all at once with this:

$('.datepicker').datepicker();

Demo: http://jsfiddle.net/ambiguous/ua4bc/

Most plugins can bind to multiple elements at once, that's why almost all of them look like:

return this.each(function() { ... });

inside.

If you needed the IDs for some other purpose then you could just do this:

$('.datepicker').each(function(i) {
    this.id = 'datepicker' + i;
}).datepicker();

Demo (use your DOM inspector to see the IDs): http://jsfiddle.net/ambiguous/6zfEY/

answered Apr 23, 2012 at 3:04

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The Alpha · Accepted Answer · 2012-04-23 02:25:57Z

2

$(function(){
    $('.datepicker').each(function(i){
        $(this).attr('id', $(this).attr('class')+parseInt(i+1));
    });

    // You can call like
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
    $("#datepicker3").datepicker();
});

but I think you don't need to add id, anyways.

answered Apr 23, 2012 at 2:25

The Alpha

147k30 gold badges294 silver badges313 bronze badges

2 Comments

Clinton Green Over a year ago

The top part looks great but is there a way to generate this part: $("#datepicker1").datepicker(); like you did above? Thanks for the help, cheers

Clinton Green Over a year ago

Sorry, what you said about not needing the ID is correct so disregard my last comment thinks

j0k · Accepted Answer · 2012-10-03 11:31:52Z

0

Hello I tried this binding using Spring MVC 3.0 and... It works, nice ! I have the script

<script type="text/javascript">
  $(function(){
  $(".datepicker").datepicker({ dateFormat:"dd/mm/yy" });
  });
</script>

and then, in my case, working with JSP and JSTL I was able to bind a JQueryPicker to my elements that are created dinamically, and here is a piece of code, if you see a when it's becuase I am working on more things, but the idea is the same:

<c:when test="${fieldVar.type == 'DATE'}">
  <td><form:input path="fieldWrapperElements[${status.index}].dateValue"class="datepicker"/></td>
</c:when>

edited Oct 3, 2012 at 11:31

j0k

22.8k28 gold badges81 silver badges90 bronze badges

answered Aug 14, 2012 at 18:06

Gerard Manzano

1

Collectives™ on Stack Overflow

jQuery Datepicker how to dynamically add IDs to input field

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related