datepicker for dynamic form elements

hi i am using datepicker which works fine if there is one date field.
I am generating dynamic date fields using jquery. But datepicker does not work on those dynamic fields.

Does anyone have a tutorial/example that shows how datepicker is used with dynamic form elements?
genius_geekAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
run
$( "#new_datepicker_ID" ).datepicker();

Open in new window

each time you create a new datepicker
genius_geekAuthor Commented:
its not working. i tried that.
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simple cloning demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.error{
	border: 2px solid red;
	background-color: #FFFFD5;
	margin: 0px;
	color: red;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
	<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script type="text/javascript">
var current= 1;
$(function() {
		$( "#datepicker1" ).datepicker();
		$( "#datepicker2" ).datepicker();
	});
$(document).ready(function() {
    $("#addeducation").click(function() {
        current++;
        /* GWF - Modified the line below */
        $neweducation= $("#userTemplate").clone(true).removeAttr("id").attr("id", "fieldSet" + current).insertBefore("#userTemplate");
        $neweducation.children("p").children("input").each(function(i) {
            var $currentElem= $(this);
            $currentElem.attr("name",$currentElem.attr("name")+current);
            $currentElem.attr("id",$currentElem.attr("id")+current);
        });
        var f = $("#fieldSet"+current);
        f.html(f.html().replace("fieldSetID", "fieldSet"+current));
        $neweducation.appendTo("#mainField");
        $neweducation.removeClass("hideElement");
        //add validation
        $("#level"+current).rules("add", { required:true,minlength:2 });
        $("#institution"+current).rules("add", { required:true,minlength:2 });
        $("#board"+current).rules("add", { required:true,minlength:2 });
		$("#division"+current).rules("add", { required:true,minlength:2 });
		var prevvalue=$("#count").attr("value");
		$("#count").attr("value",prevvalue+","+current);

    });
    $("#demoForm").validate({
        errorPlacement: function(error, element) {
             $(element).attr("class","error");
             //error.insertAfter(element);
         },
        rules: {
            level1: {
                required: true,
                minlength: 2
            }
            ,institution1: {
                required: true,
                minlength: 2
            }
            ,board1: {
                required: true,
                minlength:2
            }
			,division1: {
                required: true,
                minlength:2
            }
        }
});
});

/* GWF - Add function to remove education */
function removeeducation(id) {
    $(id).remove();
	var fieldid=id.replace("#fieldSet","");
	var prev=$("#count").attr("value");
	var finalids=prev.replace(","+fieldid,"");
	$("#count").attr("value",finalids);

};
</script>
<style>
.hideElement {display:none;}
</style>
</head>
<body>
<div id="userTemplate" class="hideElement">
<p>
    <input id="level" name="level" size="25" /> 
	<input id="institution" name="institution" size="25" />
    <input id="board" name="board" size="25" />
	<input id="division" name="division" size="25"/>
	<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->
        </p>
</p>
<p>
    <a href='#' onClick='removeeducation("#fieldSetID"); return false;'>Remove</a>
</p>
</div>
<form name="demoForm" id="demoForm" method="post" action="getvalues.php">

    <fieldset id="mainField">
    <div>
	<table><tr><td width="170px" align="center">Level</td><td width="170px" align="center">Institution</td><td width="170px" align="center">Board</td><td width="170px" align="center">Division</td></tr></table>
        <p>
           <input id="level1" name="level1" size="25" /> 
			<input id="institution1" name="institution1" size="25" />
			<input id="board1" name="board1" size="25" />
			<input id="division1" name="division1" size="25"/>
			<div class="demo">

<p>Date: <input type="text" id="datepicker1"></p>

</div><!-- End demo -->
        </p>
    </div>
    </fieldset>
    <p>
    <input type="button" id="addeducation" value="Add Another">
    </p>
    <input type="hidden" name="count" value="1" id="count"/> 
    <input type="submit" value="Save">
</form>
</body>
</html>

Open in new window

leakim971PluritechnicianCommented:
<< each time you create a new datepicker >> mean after creating the new datepickers NOT BEFORE! And use the right ID :)
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

genius_geekAuthor Commented:
I dont understand what you are trying to say.

Before/after does it matter?  they are within the script tag.

ID's are right - for the first field field id will be datepicker1 for susbsequent fields generated dynamically IDs will be datepickerNUMBER so that is datepicker2..datepicker3...so on
leakim971PluritechnicianCommented:
>I dont understand what you are trying to say.
>Before/after does it matter?

Yes it is ! This is you issue, run datepicker AFTER each dynamically generated input dedicated for your datepicker
genius_geekAuthor Commented:
HOw?
leakim971PluritechnicianCommented:
where are you creating dynamically your datepicker, please give me the last line
leakim971PluritechnicianCommented:
hmmm... replace line 37 :
    });

Open in new window

by :
    }); $("#datepicker" + current ).datepicker();

Open in new window

genius_geekAuthor Commented:
replaced. but still does not work :-(
genius_geekAuthor Commented:
put it after line 39. tried and tested. works.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
genius_geekAuthor Commented:
i found the solution before anyone answered it
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.