Dynamic Form with jQuery UI datepicker

This tutorial is a continuation of Dynamic Form Elements with jQuery That tutorial covered making dynamic input and select menu's this tutorial will expand on that to explain how to use jQuery's UI library specifically its datepicker widget to apply to all inputs created by the dom with a class of datepicker.

Demo

Since I'm using jQuery UI I'm going to load their stylesheet from their CDN:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />

Next I'll go over the markup then the jQuery which will be placed at the bottom of the file as that's a best practice for working with javascript.

For the dynamically generated inputs I have a div with an id of extender this div is a placeholder for jQuery to grab and place the input elements into. I also have a text link with an id of add, this id will be used by jQuery.

<div id="extender"></div>
<a id="add" href="#">Add</a>

Now to include jquery and the jQuery UI library

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

Next open javacript and place all code inside a function this way the code will only try to run once the page has finished loading.

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

To remove an item create a click function for the class remove when detected will run a fadeout function, making use of $(this) to get the current item and parent() this will get not only the link put its parent in this case the input, before removing the item.

$('.remove').live('click', function() {
    $(this).parent().fadeOut(300, function(){
        $(this).empty();
        return false;
    });
});

Next I've created a var called options that will contain the various inputs and remove link that will be added each time by click the add link

var options = '<p>Title: <input type="text" name="titles[]" value="" size="30" />  Date: <input type="text" class="datepicker" name="dates[]" value="" size="10" />   <a href="#" class="remove">Remove</a></p>';

In the example above I have two inout the first is for a title and the second if for a date notice they do not have an id and the date input has a class of datepicker for each input you want to apply a datepicker togive it a class, the class can be called anything you like. Also as there could be lots of rows added you can't give the input a specific name or you could end up woth more then one input with the ame name instead give the input a name and add [] on the end to create an array, this way when processing the form you can collect all the inputs correctly.

Next add the options var to a selector then using fadeIn and appendTo when activated the new elements will fadein and be appended to the div with an id of extender

//add input
$('a#add').click(function() {
    $(options).fadeIn("slow").appendTo('#extender');     
    return false;
});

To add the datepicker widget I'm looking for when an input with a class of datepicker is clicked on then the following function will run, essentially its removes all prevous instances of a datepicker and create a new one for the selected element.

$('.datepicker').live('click', function() {
    $(this).datepicker('destroy').datepicker({changeMonth: true,changeYear: true,dateFormat: "yy-mm-dd",yearRange: "1900:+10",showOn:'focus'}).focus();
});

Putting it all together:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Form with Jquery UI datepicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
</head>
<body> 

    <form action="" method="post">

    <fieldset>
        <legend>Inputs</legend>
            <div id="extender"></div>
            <p><a href="#" id="add">Add</a></p>
    </fieldset>

    </form>

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {

    //fadeout selected item and remove
    $('.remove').live('click', function() {
        $(this).parent().fadeOut(300, function(){ 
            $(this).empty();
            return false;
        });
    });

    var options = '<p>Title: <input type="text" name="titles[]" value="" size="30" />  Date: <input type="text" class="datepicker" name="dates[]" value="" size="10" />   <a href="#" class="remove">Remove</a></p>';    

    //add input
    $('a#add').click(function() {
        $(options).fadeIn("slow").appendTo('#extender'); 
        i++;    
        return false;
    });

    $('.datepicker').live('click', function() {
        $(this).datepicker('destroy').datepicker({changeMonth: true,changeYear: true,dateFormat: "yy-mm-dd",yearRange: "1900:+10",showOn:'focus'}).focus();
    });


});
</script>
</body>
</html>

Dynamic Form with jQuery UI datepicker

Table of Contents

Putting it all together: