jQuery UI - Dynamically add DatePicker to input TextBox

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your Web pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. In this example we will learn how to bind the datepicker to an existing form element as well as to form elements such as input text boxes added dynamically to the page.


jquery datepicker dynamic binding example

Dynamic binding of jQuery datepicker

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex,nofollow" />
<title>Dynamically attach jQuery DatePicker to Text box </title>
<link rel="stylesheet" href="/resources/themes/master.css" type="text/css" />
<link
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
 rel="stylesheet" type="text/css" />
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
 type="text/javascript"></script>
<script
 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
 type="text/javascript"></script>
<script
 src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"
 type="text/javascript"></script>
<script src="/resources/scripts/mysamplecode.js" type="text/javascript"></script>
 
<script type="text/javascript">
$(document).ready(function() {
 
 var myCounter = 1;
 $(".myDate").datepicker();
  
 $("#moreDates").click(function(){
   
  $('.myTemplate')
   .clone()
   .removeClass("myTemplate")
   .addClass("additionalDate")
   .show()
   .appendTo('#importantDates');
   
  myCounter++;
  $('.additionalDate input[name=inputDate]').each(function(index) {
   $(this).addClass("myDate");
   $(this).attr("name",$(this).attr("name") + myCounter);
  });
   
  $(".myDate").on('focus', function(){
      var $this = $(this);
      if(!$this.data('datepicker')) {
       $this.removeClass("hasDatepicker");
       $this.datepicker();
       $this.datepicker("show");
      }
  });
   
 });
  
});
</script>
</head>
<body>
 <div id="allContent">
 <%@include file="/header.jsp"%>
  <div id="myContent">
   <form id="samplecode" name="samplecode" method="POST" action="">
     <fieldset>
      <legend><b>&nbsp;&nbsp;&nbsp;jQuery DatePicker DEMO&nbsp;&nbsp;&nbsp;</b></legend>
      <div id="importantDates">
       <p>
        Please list all important dates for 2012...
       </p>
       <p>
        <input class="myDate" type="text" name="inputDate1" size="10" value=""/>&nbsp;(mm/dd/yyyy)
       </p>
      <div class="myTemplate" style="display:none">
       <p>
        <input type="text" name="inputDate" size="10" value=""/>&nbsp;(mm/dd/yyyy)
       </p>
      </div>
      </div>
      <input id="moreDates" type="button" value="Add more Dates" />
       
     </fieldset>
   </form>
  </div>
 </div>
 
 <%@include file="/footer.jsp"%>
 <div></div>
</body>
</html>

References

Labels:

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.