Demo Download

In this tutorial, I will show you how to apply jQuery datepicker on dynamically added input fields.

jQuery UI is a very useful library, we use it when we need to display datepicker calendar in our HTML form fields.

I have previously shared a tutorial on how to use jQuery Datepicker with icon. But this will work only with those fields which exist in HTML form at the time loading page.

What if you want to apply jQuery datepicker on dynamically added input fields. Then it will not work therefore I would like to share a method which will help you to use datepicker on dynamically added input fields as well.

Steps to Use jQuery Datepicker on Dynamically Added Input Fields

Follow the below steps to apply jQuery datepicker on dynamically added input fields.

1. Include jQuery & jQuery UI Library
2. HTML Code for Date Field
3. JavaScript Code for Adding Dynamic Input Fields
4. JavaScript Code for Applying Datepicker on Dynamically Added Input Fields

1. Include jQuery & jQuery UI Library

First of all, I will add all the required jQuery and jQuery UI library for datepicker.

Add the CSS in the head section and JavaScript in the footer section of the web page.

Create an index.html file and copy paste the below code in relevant section.

Required Libraries:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

2. HTML Code for Date Field

Now, I will add input field for date, I will wrap it in HTML table row so that when we add new date field, it will be added in a HTML table row.

Add the following code in the index.html file.

<table class="table" id="date_table">
    <tbody>
        <tr>
            <th>Date</th>
            <th style="width:96px;">Action</th></tr>
        <tr>
            <td><input type="text" name="date[]" class="date" id="date1" readonly placeholder="DD/MM/YYYY" /></td>
            <td></td>
        </tr>
    </tbody>
</table>
<button class="add_more">Add More</button>

Reader Also Read: Accept Only Numbers on Dynamically Added Input Fields

3. JavaScript Code for Adding Dynamic Input Fields

Although, this is not a required part of this tutorial. If you already have implemented how to add dynamic input fields in your form but I am sharing this code because some readers don’t have this code as well.

This will simply append new input field in our HTML table, so that we can apply jQuery datepicker on dynamically added input fields.

Make sure these JavaScript code must come after the required libraries.

<script>
//Add More Date Rows
$(document).ready(function() {
    var max_rows   = 10; //Maximum allowed group of input fields 
    var wrapper    = $("#date_table"); //Group of input fields wrapper
    var add_button = $(".add_more"); //Add button class or ID
    var x = 1; //Initial group of input fields count

    $(add_button).click(function(e){ //On click add employee button
        e.preventDefault();
        if(x < max_rows){ //max group of input fields allowed
            x++; //group of input fields increment
            $('#date_table tr:last td:last-child').html("");
            $(wrapper).append('<tr><td><input type="text" name="date[]" class="date" id=\"date'+x+'\" readonly placeholder="DD/MM/YYYY" /></td><td><button class="remove">Remove</button></td></td></tr>'); //add group of input fields
	}
    }); 

    $(wrapper).on("click",".remove", function(e){ // On click to remove button
        e.preventDefault(); $(this).parent().parent().remove(); x--;
        var rowCount = $("#date_table tr").length;
        if(rowCount>2){
            $('#date_table tr:last td:last-child').html('<button class="remove">Remove</button></td>');
        }
    });

});
</script>

4. JavaScript Code for Applying Datepicker on Dynamically Added Input Fields

This is the most important part of this tutorial. In this step I will apply datepicker on dynamically added input fields.

Copy paste the below code in index.html footer after libraries.

<script>
// Apply jQuery Datepicker on Dynamically Added Input Fields & Existing Input Fields
$('body').on('focus',".date", function(){
        $(this).datepicker({
			dateFormat : 'dd/mm/yy',
			changeMonth: true,
			changeYear: true,
			yearRange: "-100:+0"
		});
    });
</script>

You can change the datepicker attribute format such as dateFormat in your desired format or even can remove these attributes if you do not need them.

Reader Also Read: How to add remove group of input fields using jQuery.

Conclusion

I hope by now you know how to apply jQuery datepicker on dynamically added input fields.

This is very easy, you just need to apply datepicker on input field when the field is focused.

You can also apply many other features and libraries on dynamic added input field using the same method. Apply them when the field is focused when user click on it.

If you found this tutorial helpful, share it with your friends and developers group.

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook, Twitter and share it.

Demo Download

Facebook Official Page: All PHP Tricks

Twitter Official Page: All PHP Tricks