- SPLessons

Dynamic JQuery date picker code

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Dynamic JQuery date picker code

Dynamic JQuery date picker code 

Description :

Adding a datepicker to static inputs its simple, but if your adding any dynamic content to your form and in that content if you have datepicker field, Then how to add a datepicker to this filed.
Just follow the below steps to get Dynamic JQuery date picker code to your form.

 

Step1 :

Add the below scripts and styles in your project.

  1. bootstrap.min.css
  2. jquery-ui-1.8.23.custom.css
  3. jquery-1.8.0.min.js
  4. jquery-ui-1.8.23.custom.js

Step2 :

Create a file named ‘index.html’ and add below content in that page.

data picker js code


<script type="text/javascript">
$(function() {
			
			$(document).on("click",".date_Picker",function(){		
				
					$(this).datepicker({					    
							changeMonth: true,
							changeYear: true,
							dateFormat: 'yy-mm-dd'						
						}).datepicker("show");
				});
				
	});

</script>

This below code will add dynamic content to your form


			
<script type="text/javascript">

var intTextBox=1;
//FUNCTION TO ADD File BOX ELEMENT
function add_tr()
{
	if(intTextBox<5)
	{

intTextBox = intTextBox + 1;
var contentID = document.getElementById('row_div');
var newtr = document.createElement('tr');
newtr.setAttribute('id','floorstrText'+intTextBox);
newtr.innerHTML = "<td>"+intTextBox+"</td><td><input type='text' id=title" + intTextBox + " name=title" + intTextBox + " class='input-medium' cost_class='cost_type'/></td><td><input type='text' id=cos" + intTextBox + " name=cost" + intTextBox + " class='input-medium' cost_class='cost_type'/></td><td><input  name=date"+ intTextBox +" type='text' class='date_Picker input-medium'  id=dat"+ intTextBox +" date_class='date_type'/></td><td><input type='text' id=des" + intTextBox + " name=des" + intTextBox + " description_class='description_type' /></td>";
contentID.appendChild(newtr);
	}
	else
	{
		alert("you will save only 5 reports at a time so please save the u have entered reports");
	}
}

//FUNCTION TO REMOVE TEXT BOX ELEMENT
function remove_tr()
{
	if(intTextBox != 0)
	{
	var contentID = document.getElementById('row_div');
	contentID.removeChild(document.getElementById('floorstrText'+intTextBox));
	intTextBox = intTextBox-1;
	}
}
</script>


Please find the below HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Datepicker Jquery</title>
</head>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.23.custom.css">

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.23.custom.js"></script>


<!-- data picker js code goes here -->			

<!-- Add dynamic content your form js code goes here -->



<body>

<div style="margin:10%;" >

<table class="table table-list table-striped"  style="width:40%;">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Title</th>

                    <th>Cost</th>
                    <th>Date</th>
                    <th>Description</th>

                </tr>
            </thead>
            <tbody id="row_div">
                <tr>

                    <td>1</td>
                    <td><input type="text" id="title" class="input-medium" name="title" cost_class="title"/></td>

                    <td><input type="text" id="cos" class="input-medium" name="cost" cost_class="cost_type"/></td>
                    <td><input type="text" id="dat" class="input-medium date_Picker" name="date1" date_class="date_type"/></td>
                     <td><input type="text" id="des" class="test" name="description" description_class="description_type" /></td>

                </tr>
            </tbody>
        </table>

                    <div class="row" style="margin-left:20px;"><a href="javascript:add_tr();">Add</a>&nbsp;|&nbsp;
                   		 <a href="javascript:remove_tr();">Remove</a>
    				</div>
</div>
</body>
</html>

Just open the ‘index.html’ and trying to add rows to that table and move curson date fields, you will get datepicker on date fields.