jquery · scottgonzalez · May 15, 2014 · Jun 3, 2014 · Jun 4, 2014 · Jun 3, 2014
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -28,6 +28,7 @@ var
 		"core",
 		"accordion",
 		"autocomplete",
+		"calendar",
 		"button",
 		"datepicker",
 		"dialog",

diff --git a/build/tasks/testswarm.js b/build/tasks/testswarm.js
@@ -14,6 +14,7 @@ var versions = {
 		"Accordion": "accordion/accordion.html",
 		"Autocomplete": "autocomplete/autocomplete.html",
 		"Button": "button/button.html",
+		"Calendar": "calendar/calendar.html",
 		"Core": "core/core.html",
 		"Core_deprecated": "core/core_deprecated.html",
 		"Datepicker": "datepicker/datepicker.html",

diff --git a/demos/datepicker/buttonbar.html → demos/calendar/buttonbar.html b/demos/datepicker/buttonbar.html → demos/calendar/buttonbar.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery UI Datepicker - Display button bar</title>
+	<title>jQuery UI Calendar - Display button bar</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<script src="../../external/jquery/jquery.js"></script>
 	<script src="../../external/globalize/globalize.js"></script>
@@ -11,20 +11,24 @@
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
 	<script src="../../ui/button.js"></script>
+	<script src="../../ui/calendar.js"></script>
 	<script src="../../ui/position.js"></script>
-	<script src="../../ui/datepicker.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "#datepicker" ).datepicker({
-			showButtonPanel: true
+		$( "#calendar" ).calendar({
+			buttons: {
+				"Today": function() {
+					$( this ).calendar( "valueAsDate", new Date() );
+				}
+			}
 		});
 	});
 	</script>
 </head>
 <body>
 
-<p>Date: <input type="text" id="datepicker"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
 <p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option.  Each button is enabled by default when the bar is displayed, but can be turned off with additional options.  Button text is customizable.</p>

diff --git a/demos/calendar/date-formats.html b/demos/calendar/date-formats.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Calendar - Format date</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<script src="../../external/jquery/jquery.js"></script>
+	<script src="../../external/globalize/globalize.js"></script>
+	<script src="../../external/date.js"></script>
+	<script src="../../external/localization.js"></script>
+	<script src="../../ui/core.js"></script>
+	<script src="../../ui/widget.js"></script>
+	<script src="../../ui/button.js"></script>
+	<script src="../../ui/calendar.js"></script>
+	<script src="../../ui/position.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var calendar = $( "#calendar" ).calendar(),
+			value;
+
+		$( "#format" ).change(function() {
+			value = $( this ).val();
+			switch( value ) {
+				case "iso":
+					calendar.calendar( "option", "dateFormat", { pattern: "yyyy-MM-dd" } );
+					break;
+				default:
+					calendar.calendar( "option", "dateFormat", { date: value } );
+					break;
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<p>Format options:<br />
+	<select id="format">
+		<option value="short">Short - M/d/yy in "en" locale</option>
+		<option value="long">Long - MMMM d, y in "en" locale</option>
+		<option value="iso">ISO 8601 - yyyy-MM-dd</option>
+	</select>
+</p>
+
+<div class="demo-description">
+<p>Display date feedback in a variety of ways.  Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p>
+</div>
+</body>
+</html>
diff --git a/demos/datepicker/inline.html → demos/calendar/default.html b/demos/datepicker/inline.html → demos/calendar/default.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery UI Datepicker - Display inline</title>
+	<title>jQuery UI Calendar - Default functionality</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<script src="../../external/jquery/jquery.js"></script>
 	<script src="../../external/globalize/globalize.js"></script>
@@ -11,21 +11,21 @@
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
 	<script src="../../ui/button.js"></script>
+	<script src="../../ui/calendar.js"></script>
 	<script src="../../ui/position.js"></script>
-	<script src="../../ui/datepicker.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "#datepicker" ).datepicker();
+		$( "#calendar" ).calendar();
 	});
 	</script>
 </head>
 <body>
 
-Date: <div id="datepicker"></div>
+<div id="calendar"></div>
 
 <div class="demo-description">
-<p>Display the datepicker embedded in the page instead of in an overlay.  Simply call .datepicker() on a div instead of an input.</p>
+<p>The calendar is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
 </div>
 </body>
 </html>
diff --git a/demos/datepicker/dropdown-month-year.html → demos/calendar/dropdown-month-year.html b/demos/datepicker/dropdown-month-year.html → demos/calendar/dropdown-month-year.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery UI Datepicker - Display month &amp; year menus</title>
+	<title>jQuery UI Calendar - Display month &amp; year menus</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<script src="../../external/jquery/jquery.js"></script>
 	<script src="../../external/globalize/globalize.js"></script>
@@ -11,12 +11,12 @@
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
 	<script src="../../ui/button.js"></script>
+	<script src="../../ui/calendar.js"></script>
 	<script src="../../ui/position.js"></script>
-	<script src="../../ui/datepicker.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "#datepicker" ).datepicker({
+		$( "#calendar" ).calendar({
 			changeMonth: true,
 			changeYear: true
 		});
@@ -25,7 +25,7 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="datepicker"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
 <p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.  Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>

diff --git a/demos/calendar/index.html b/demos/calendar/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery UI Calendar Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="buttonbar.html">Display button bar</a></li>
+	<li><a href="date-formats.html">Format date</a></li>
+	<li><a href="dropdown-month-year.html">Display month &amp; year menus</a></li>
+	<li><a href="localization.html">Localize calendar</a></li>
+	<li><a href="min-max.html">Restrict date range</a></li>
+	<li><a href="multiple-months.html">Display multiple months</a></li>
+	<li><a href="other-months.html">Dates in other months</a></li>
+	<li><a href="show-week.html">Show week of the year</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/demos/calendar/localization.html b/demos/calendar/localization.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Calendar - Localize calendar</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<script src="../../external/jquery/jquery.js"></script>
+	<script src="../../external/globalize/globalize.js"></script>
+	<script src="../../external/date.js"></script>
+	<script src="../../external/localization.js"></script>
+	<script src="../../ui/core.js"></script>
+	<script src="../../ui/widget.js"></script>
+	<script src="../../ui/button.js"></script>
+	<script src="../../ui/calendar.js"></script>
+	<script src="../../ui/position.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var calendar = $( "#calendar" ).calendar(),
+			date = calendar.calendar( "valueAsDate" );
+
+		$( "#locale" ).change(function() {
+			Globalize.locale( $(this).val() );
+			calendar.calendar( "valueAsDate", date );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="calendar"></div>
+<select id="locale">
+	<option value="de-DE" selected>German (Deutsch)</option>
+	<option value="en">English</option>
+</select></p>
+
+<div class="demo-description">
+<p>Localize the calendar calendar language and format (English / Western formatting is the default).  The calendar includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p>
+</div>
+</body>
+</html>
diff --git a/demos/datepicker/min-max.html → demos/calendar/min-max.html b/demos/datepicker/min-max.html → demos/calendar/min-max.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery UI Datepicker - Restrict date range</title>
+	<title>jQuery UI Calendar - Restrict date range</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<script src="../../external/jquery/jquery.js"></script>
 	<script src="../../external/globalize/globalize.js"></script>
@@ -11,21 +11,28 @@
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
 	<script src="../../ui/button.js"></script>
+	<script src="../../ui/calendar.js"></script>
 	<script src="../../ui/position.js"></script>
-	<script src="../../ui/datepicker.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
+        var now = new Date(),
+            dateMin = new Date( now.getFullYear(), now.getMonth(), now.getDay() + 1 ),
+            dateMax = new Date( now.getFullYear(), now.getMonth(), now.getDay() + 8 );
+
+        $( "#calendar" ).calendar({
+            min: dateMin,
+            max: dateMax
+        });
 	});
 	</script>
 </head>
 <body>
 
-<p>Date: <input type="text" id="datepicker"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
-<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options.  Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D').  For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p>
+<p>Restrict the range of selectable dates with the <code>min</code> and <code>max</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)).</p>
 </div>
 </body>
 </html>
diff --git a/demos/datepicker/multiple-calendars.html → demos/calendar/multiple-months.html b/demos/datepicker/multiple-calendars.html → demos/calendar/multiple-months.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery UI Datepicker - Display multiple months</title>
+	<title>jQuery UI Calendar - Display multiple months</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<script src="../../external/jquery/jquery.js"></script>
 	<script src="../../external/globalize/globalize.js"></script>
@@ -11,12 +11,12 @@
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
 	<script src="../../ui/button.js"></script>
+	<script src="../../ui/calendar.js"></script>
 	<script src="../../ui/position.js"></script>
-	<script src="../../ui/datepicker.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "#datepicker" ).datepicker({
+		$( "#calendar" ).calendar({
 			numberOfMonths: 3,
 			showButtonPanel: true
 		});
@@ -25,10 +25,10 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="datepicker"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
-<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p>
+<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single calendar.</p>
 </div>
 </body>
 </html>
diff --git a/demos/datepicker/other-months.html → demos/calendar/other-months.html b/demos/datepicker/other-months.html → demos/calendar/other-months.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery UI Datepicker - Dates in other months</title>
+	<title>jQuery UI Calendar - Dates in other months</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<script src="../../external/jquery/jquery.js"></script>
 	<script src="../../external/globalize/globalize.js"></script>
@@ -11,12 +11,12 @@
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
 	<script src="../../ui/button.js"></script>
+	<script src="../../ui/calendar.js"></script>
 	<script src="../../ui/position.js"></script>
-	<script src="../../ui/datepicker.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "#datepicker" ).datepicker({
+		$( "#calendar" ).calendar({
 			eachDay: function( day ) {
 				if ( day.lead ) {
 					day.render = true;
@@ -30,10 +30,10 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="datepicker"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
-<p>The datepicker can show dates that come from other than the main month
+<p>The calendar can show dates that come from other than the main month
 	being displayed. These other dates can also be made selectable.</p>
 </div>
 </body>

diff --git a/demos/datepicker/show-week.html → demos/calendar/show-week.html b/demos/datepicker/show-week.html → demos/calendar/show-week.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery UI Datepicker - Show week of the year</title>
+	<title>jQuery UI Calendar - Show week of the year</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<script src="../../external/jquery/jquery.js"></script>
 	<script src="../../external/globalize/globalize.js"></script>
@@ -11,23 +11,23 @@
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
 	<script src="../../ui/button.js"></script>
+	<script src="../../ui/calendar.js"></script>
 	<script src="../../ui/position.js"></script>
-	<script src="../../ui/datepicker.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "#datepicker" ).datepicker({
+		$( "#calendar" ).calendar({
 			showWeek: true
 		});
 	});
 	</script>
 </head>
 <body>
 
-<p>Date: <input type="text" id="datepicker"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
-<p>The datepicker can show the week of the year. The calculation follows
+<p>The calendar can show the week of the year. The calculation follows
 	<a href="http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table">Unicode CLDR specification</a>.
 	This means that some days from one year may be placed into weeks 'belonging' to another year.</p>
 </div>