- 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() {
							changeMonth: true,
							changeYear: true,
							dateFormat: 'yy-mm-dd'						


This below code will add dynamic content to your form

<script type="text/javascript">

var intTextBox=1;
function add_tr()

intTextBox = intTextBox + 1;
var contentID = document.getElementById('row_div');
var newtr = document.createElement('tr');
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>";
		alert("you will save only 5 reports at a time so please save the u have entered reports");

function remove_tr()
	if(intTextBox != 0)
	var contentID = document.getElementById('row_div');
	intTextBox = intTextBox-1;

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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Datepicker Jquery</title>

<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 -->


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

<table class="table table-list table-striped"  style="width:40%;">


            <tbody id="row_div">

                    <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>


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

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.