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.
- bootstrap.min.css
- jquery-ui-1.8.23.custom.css
- jquery-1.8.0.min.js
- jquery-ui-1.8.23.custom.js
Step2 :
Create a file named 'index.html' and add below content in that page.
[javascript]
<script type="text/javascript">
$(function() {
$(document).on("click",".date_Picker",function(){
$(this).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
}).datepicker("show");
});
});
</script>
[/javascript]
This below code will add dynamic content to your form
[javascript]
<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>
[/javascript]
Please find the below HTML code
[html]
<!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> |
<a href="javascript:remove_tr();">Remove</a>
</div>
</div>
</body>
</html>
[/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.
