/dyndatetime/example.html

http://dyndatetime.googlecode.com/ · HTML · 100 lines · 82 code · 18 blank · 0 comment · 0 complexity · d158a3aa8dd4ce1559798ad0ca86d728 MD5 · raw file 

    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. 

  2. 

  3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. 

  4. 

  5. 	<head>
    6. 

  6. 		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    7. 

  7. 		<title>dynDateTime: jQuery date time calendar plugin, based on Dynarch calendar </title>
    8. 

  8. 		
    9. 

  9. 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    10. 

  10. 		
    11. 

  11. 		<script type="text/javascript" src="jquery.dynDateTime.js"></script>
    12. 

  12. 		<script type="text/javascript" src="lang/calendar-en.js"></script>
    13. 

  13. 

  14. 		<link rel="stylesheet" type="text/css" media="all" href="css/calendar-win2k-cold-1.css"  />
    15. 

  15. 

  16. 	</head>
    17. 

  17. 	<body>
    18. 

  18. 	
    19. 

  19. 	<h1>dynDateTime</h1>
    20. 

  20. 	
    21. 

  21. 	<p>See project <a href="http://code.google.com/p/dyndatetime/">home page</a> for details.</p>
    22. 

  22. 	
    23. 

  23. 		<form action="/nothing/to/post.to">
    24. 

  24. 			<div>
    25. 

  25. 				<h3>Default with no options</h3>
    26. 

  26. 				<script type="text/javascript">
    27. 

  27. 					jQuery(document).ready(function() {
    28. 

  28. 						jQuery("#dateDefault").dynDateTime(); //defaults
    29. 

  29. 					});
    30. 

  30. 				</script>
    31. 

  31. 				<input type="text" name="dateDef" id="dateDefault"/>
    32. 

  32. 				<hr/>
    33. 

  33. 	
    34. 

  34. 				<h3>Bind to multiple inputs in one go</h3>
    35. 

  35. 				<script type="text/javascript">
    36. 

  36. 					jQuery(document).ready(function() {
    37. 

  37. 	
    38. 

  38. 						jQuery("#multi input").dynDateTime({				
    39. 

  39. 							button: ".next()" //next sibling
    40. 

  40. 						}); 
    41. 

  41. 						
    42. 

  42. 					});
    43. 

  43. 				</script>
    44. 

  44. 				<div id="multi">
    45. 

  45. 					<input type="text" name="dateA"/>
    46. 

  46. 					<button type="button">PICKER</button>
    47. 

  47. 					<br/>
    48. 

  48. 					
    49. 

  49. 					<input type="text" name="dateB"/>
    50. 

  50. 					<button type="button">PICKER</button>
    51. 

  51. 					<br/>
    52. 

  52. 					
    53. 

  53. 					<input type="text" name="dateC" value="2001/09/11"/>
    54. 

  54. 					<button type="button">PICKER</button>
    55. 

  55. 					<br/>
    56. 

  56. 				</div>
    57. 

  57. 				<hr/>
    58. 

  58. 	
    59. 

  59. 				<h3>Using time, custom format, display output, and different pop-up location</h3>
    60. 

  60. 				<script type="text/javascript">
    61. 

  61. 					jQuery(document).ready(function() {
    62. 

  62. 						jQuery("#dateTimeCustom").dynDateTime({
    63. 

  63. 							showsTime: true,
    64. 

  64. 							ifFormat: "%Y/%m/%d-%H:%M",
    65. 

  65. 							daFormat: "%l;%M %p, %e %m,  %Y",
    66. 

  66. 							align: "TL",
    67. 

  67. 							electric: false,
    68. 

  68. 							singleClick: false,
    69. 

  69. 							displayArea: ".siblings('.dtcDisplayArea')",
    70. 

  70. 							button: ".next()" //next sibling
    71. 

  71. 						});
    72. 

  72. 					});
    73. 

  73. 				</script>
    74. 

  74. 				The selected date is <span class="dtcDisplayArea"></span> <br/>
    75. 

  75. 				<input type="text" name="dateTimeCust" id="dateTimeCustom"/>
    76. 

  76. 				<button type="button">PICKER</button>
    77. 

  77. 				<hr/>
    78. 

  78. 	
    79. 

  79. 				<h3>Flat example</h3>
    80. 

  80. 				<script type="text/javascript">
    81. 

  81. 					jQuery(document).ready(function() {
    82. 

  82. 						jQuery("#dateFlat").dynDateTime({
    83. 

  83. 								flat: ".next()"
    84. 

  84. 							});
    85. 

  85. 					});
    86. 

  86. 				</script>
    87. 

  87. 				<input type="text" name="dateDef" id="dateFlat" value="2001/09/11"/>
    88. 

  88. 				<div style="float: left;">&nbsp;</div>
    89. 

  89. 				<hr style="clear: both;"/>
    90. 

  90. 	
    91. 

  91. 			</div>
    92. 

  92. 		</form>
    93. 

  93. 

  94. 		<p>
    95. 

  95. 			<a href="http://validator.w3.org/check?uri=referer">
    96. 

  96. 		    	<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
    97. 

  97. 			</a>
    98. 

  98. 		</p>
    99. 

  99.     </body>
    100. 

  100. </html>
    101.