JavaScript / jQuery Tutorial Demo 2

Demo 2 - Date Picker

Use jQueryUI to add a date picker to your input field (very handy).

Date:

REMEMBER: You have to download and add jQuery and jquery-ui plugins
  <script> tags before the closing body tag to get these to work.
	
<!-- HTML -->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript / jQuery Tutorial Demo 1
<link href="styles/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>


	<div class="demo">
			<p>Date: <input type="text" id="jqui_datepicker"></p>
	</div>

<!-- Important for you to go to jQuery UI and download the plugin for the date picker for this one -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script src="scripts/script.js">
</body>
</html>

	
/* CSS 
   Be sure to get a theme with your download and make sure to reference 
   it in the head section. 
   For example: href="styles/ui-lightness/jquery-ui-1.10.4.custom.css"
   (See the HTML source above)
   For my demo the style below is used as well though is can be 
   modified as you like. 
*/

.demo {
	padding:20px;
	font-size:20px;
	background-color:#FFBBBC;
}

	
// JavaScript Document - include this in your src="scripts/script.js file

// Demo 2 Datepicker

$( "#jqui_datepicker" ).datepicker();


	
You have an input tag in your HTML with the id jqui_datepicker. 
In the jscript.js file you just need $( "#jqui_datepicker" ).datepicker();
Could it be any easier than this?