Datepicker With Cloned Fields

By Sergey Skudaev

This is a code to add datepicker to a single field. If id="mydate", then using id the code is:

$(function() {
$(#mydate).datepicker();
});

If class="mydate", then using class the code is:

$(function() {
$(.mydate).datepicker();
});

But when you create an array of cloned fields with clone() method, this code above is not working!

I modified the original code to add a jquery datepicker to each cloned date field. Now, if a user clickes inside the date field the calendar is displayed.

<script type="text/javascript">
  $(document).ready(function(){

   var i=0;

    $('#plus1').click(function(){

	$('<tr class="cloned1"> <td style="text-align:left; width:100px;"> DOB:       <input type="text" name="clonedA[]" size="30" onmousedown="$(this).datepicker();" onfocus="toDefault(this);"/> </td> </tr>').fadeIn("slow").appendTo("#poll1");

			i++;
    });

	  $('#minus1').click(function(){

	if(i > 0)
	{
  $('.cloned1:last').remove();

			i--;
	}

	    if(i < 0)
			i=0;

   });

  });
</script>

Click the Plus icon as many times as you wish and record will be cloned.

<script type="text/javascript">
  $(document).ready(function(){

   var i=0;

    $('#plus2').click(function(){

	$('<tr class="cloned2"> <td style="text-align:left;"> <label>Name:</label> <input type="text" name="name[]" /></td> <td style="text-align:left;"> <label>DOB:</label> <input type="text" name="cloned[]" size="30" onmousedown="$(this).datepicker();" /> </td></tr>'). fadeIn("slow"). appendTo("#poll2");

			i++;
    });

	  $('#minus2').click(function(){

	if(i > 0)
	{
  $('.cloned2:last').remove();

			i--;
	}

	    if(i < 0)
			i=0;

   });

  });
</script>

My eBooks on Amazon.com

US    UK    BR    CA

US    UK    BR    CA

US   UK   BR   CA