By Sergey Skudaev

Subscribe to our code examples

responsive website

The complete source code for a responsive website with user registration and authentication.

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.

It is important to use onmousedown event to invoke datepicker. If I used onclick event then the calendar is displayed only on the second click.

You can clone several fields at once. Here, one of the fields is a free text and another is date. This is the code.

<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>

It is important to use image instead of button. When I try to use button for plus to clone a record, the page was submitted when I click it. That is why I changed the button to the image of the button.

Subscribe to our code examples

responsive website

The complete source code for a responsive website with user registration and authentication.

Dowload for free

Our dog needs urgent surgery, and the cost is overwhelming.

Any help, big or small, would mean the world to us. Thank you for supporting Oscar on his journey to recovery!

Oscar Story.

Oscar wasn’t just any puppy—he was a gift from a mother who trusted us with her smallest one.

For five years, my wife worked at the Indian Medical Center in Arizona, deep in Navajo Nation. Near her clinic, she often saw a homeless dog wandering the area. Over time, she began feeding her, and the dog grew fond of her. Then, one day, that same dog brought her newborn puppies to my wife—as if proudly showing them off.

Among them was the smallest, most delicate pup. My wife couldn’t resist. She brought him home, and we named him Oscar.

Oscar thrived in the house provided by the medical center, enjoying the big backyard where he lived. I built him a sturdy wooden doghouse, and we often took him on walks along the Window Rock Trail. He became our adventure companion, making the vast desert feel like home.

After my wife’s contract ended, we moved back to Florida, bringing Oscar with us. He adjusted to his new surroundings, but he never lost his adventurous spirit.

Now, Oscar faces a tough challenge—he needs urgent surgery, and the cost is overwhelming. We want to give him the best care possible, just as he’s given us years of joy and loyalty.

Any help, big or small, would mean the world to us. Thank you for supporting Oscar on his journey to recovery!

Computer Programming Web programming Tips

Subscribe to our code examples

Subscribe to our code examples

My eBooks on Amazon