jquery · fnagel · Oct 8, 2015 · Aug 26, 2013 · Jan 29, 2015 · Aug 30, 2013
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -126,7 +126,12 @@ grunt.initConfig({
 				findNestedDependencies: true,
 				skipModuleInsertion: true,
 				exclude: [ "jquery" ],
-				include: expandFiles( [ "ui/**/*.js", "!ui/i18n/*" ] ),
+				include: expandFiles( [
+					"ui/**/*.js",
+					"!ui/widgets/calendar.js",
+					"!ui/widgets/datepicker.js",
+					"!ui/i18n/*"
+				] ),
 				out: "dist/jquery-ui.js",
 				wrap: {
 					start: createBanner( uiFiles ),
@@ -224,6 +229,16 @@ grunt.initConfig({
 				destPrefix: "external"
 			},
 			files: {
+				"cldrjs/cldr.js": "cldrjs/dist/cldr.js",
+				"cldrjs/cldr/event.js": "cldrjs/dist/cldr/event.js",
+				"cldrjs/cldr/supplemental.js": "cldrjs/dist/cldr/supplemental.js",
+				"cldrjs/LICENSE-MIT": "cldrjs/LICENSE-MIT",
+
+				"globalize/globalize.js": "globalize/dist/globalize.js",
+				"globalize/globalize/number.js": "globalize/dist/globalize/number.js",
+				"globalize/globalize/date.js": "globalize/dist/globalize/date.js",
+				"globalize/LICENSE.txt": "globalize/LICENSE.txt",
+
 				"qunit/qunit.js": "qunit/qunit/qunit.js",
 				"qunit/qunit.css": "qunit/qunit/qunit.css",
 				"qunit/LICENSE.txt": "qunit/LICENSE.txt",

diff --git a/bower.json b/bower.json
@@ -19,6 +19,7 @@
 		"qunit-assert-close": "JamesMGreene/qunit-assert-close#v1.1.1",
 		"qunit-composite": "JamesMGreene/qunit-composite#v1.1.0",
 		"requirejs": "2.1.14",
+	  	"globalize": "1.0.0",
 
 		"jquery-1.7.0": "jquery#1.7.0",
 		"jquery-1.7.1": "jquery#1.7.1",

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",
 		"Datepicker": "datepicker/datepicker.html",
 		"Dialog": "dialog/dialog.html",

diff --git a/demos/bootstrap.js b/demos/bootstrap.js
@@ -30,6 +30,7 @@ var widgets = [
 	"accordion",
 	"autocomplete",
 	"button",
+	"calendar",
 	"datepicker",
 	"dialog",
 	"draggable",
@@ -78,12 +79,15 @@ document.documentElement.className = "demo-loading";
 require.config( {
 	baseUrl: window.location.pathname.indexOf( "demos/" ) !== -1 ? "../../ui" : "../../../ui",
 	paths: {
+		cldr: "../external/cldrjs/cldr",
+		globalize: "../external/globalize/globalize",
+		"globalize-locales": "../external/localization",
 		jquery: "../external/jquery/jquery",
 		external: "../external/"
 	},
 	shim: {
-		"external/globalize/globalize.culture.de-DE": [ "external/globalize/globalize" ],
-		"external/globalize/globalize.culture.ja-JP": [ "external/globalize/globalize" ]
+		"external/globalize-old/globalize.culture.de-DE": [ "external/globalize-old/globalize" ],
+		"external/globalize-old/globalize.culture.ja-JP": [ "external/globalize-old/globalize" ]
 	}
 } );
 

diff --git a/demos/calendar/buttonbar.html b/demos/calendar/buttonbar.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery UI Calendar - Display button bar</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<link rel="stylesheet" href="../demos.css">
+	<script src="../../external/requirejs/require.js"></script>
+	<script src="../bootstrap.js">
+		$( "#calendar" ).calendar({
+			buttons: {
+				Today: function() {
+					$( this ).calendar( "valueAsDate", new Date() );
+				}
+			}
+		});
+	</script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<p>Display a button for selecting Today's date with the <code>buttons</code> option.</p>
+</div>
+</body>
+</html>
diff --git a/demos/datepicker/inline.html → demos/calendar/default.html b/demos/datepicker/inline.html → demos/calendar/default.html
@@ -3,20 +3,20 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>jQuery UI Datepicker - Display inline</title>
+	<title>jQuery UI Calendar - Default functionality</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<link rel="stylesheet" href="../demos.css">
 	<script src="../../external/requirejs/require.js"></script>
 	<script src="../bootstrap.js">
-		$( "#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 a widget for selecting a date using a visual calendar representation.</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
@@ -3,20 +3,20 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<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">
 	<link rel="stylesheet" href="../demos.css">
 	<script src="../../external/requirejs/require.js"></script>
 	<script src="../bootstrap.js">
-		$( "#datepicker" ).datepicker({
+		$( "#calendar" ).calendar({
 			changeMonth: true,
 			changeYear: true
 		});
 	</script>
 </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,22 @@
+<!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="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">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery UI Calendar - Localize calendar</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<link rel="stylesheet" href="../demos.css">
+	<script src="../../external/requirejs/require.js"></script>
+	<script src="../bootstrap.js" data-modules="external/localization">
+		var calendar = $( "#calendar" ),
+			select = $( "#locale" );
+
+		calendar.calendar({
+			locale: select.val()
+		});
+
+		select.change( function() {
+			calendar.calendar( "option", {
+				locale: select.val()
+			});
+			calendar.calendar( "valueAsDate", calendar.calendar( "valueAsDate" ) );
+		});
+	</script>
+</head>
+<body>
+
+<div id="calendar"></div>
+<select id="locale">
+	<option value="ar">Arabic</option>
+	<option value="de" selected>German</option>
+	<option value="en">English</option>
+	<option value="es">Spanish</option>
+	<option value="zh">Chinese Simplified</option>
+</select>
+
+<div class="demo-description">
+<p>Localize the 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/calendar/min-max.html b/demos/calendar/min-max.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Calendar - Restrict date range</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<link rel="stylesheet" href="../demos.css">
+	<script src="../../external/requirejs/require.js"></script>
+	<script src="../bootstrap.js">
+		var now = new Date(),
+			dateMin = new Date( now.getFullYear(), now.getMonth(), now.getDate() + 1 ),
+			dateMax = new Date( now.getFullYear(), now.getMonth(), now.getDate() + 8 );
+
+		dateMin = new Date( 2008, 2 - 1, 29 );
+		dateMax = new Date( 2008, 12 - 1, 7 );
+
+
+		$( "#calendar" ).calendar({
+			min: dateMin,
+			max: dateMax,
+			value: new Date( 2008, 1 - 1, 4 )
+		});
+	</script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<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 (<code>new Date(2009, 1 - 1, 26)</code>).</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
@@ -3,23 +3,22 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>jQuery UI Datepicker - Display multiple months</title>
+	<title>jQuery UI Calendar - Display multiple months</title>
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<link rel="stylesheet" href="../demos.css">
 	<script src="../../external/requirejs/require.js"></script>
 	<script src="../bootstrap.js">
-		$( "#datepicker" ).datepicker({
-			numberOfMonths: 3,
-			showButtonPanel: true
+		$( "#calendar" ).calendar({
+			numberOfMonths: 3
 		});
 	</script>
 </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
@@ -3,23 +3,28 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<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">
 	<link rel="stylesheet" href="../demos.css">
 	<script src="../../external/requirejs/require.js"></script>
 	<script src="../bootstrap.js">
-		$( "#datepicker" ).datepicker({
-			showOtherMonths: true,
-			selectOtherMonths: true
+		$( "#calendar" ).calendar({
+			eachDay: function( day ) {
+				if ( day.lead ) {
+					day.render = true;
+					day.selectable = true;
+					day.extraClasses = "ui-priority-secondary";
+				}
+			}
 		});
 	</script>
 </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/calendar/show-week.html b/demos/calendar/show-week.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery UI Calendar - Show week of the year</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<link rel="stylesheet" href="../demos.css">
+	<script src="../../external/requirejs/require.js"></script>
+	<script src="../bootstrap.js">
+		$( "#calendar" ).calendar({
+			showWeek: true
+		});
+	</script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<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>
+</body>
+</html>
diff --git a/demos/datepicker/alt-field.html b/demos/datepicker/alt-field.html
diff --git a/demos/datepicker/animation.html b/demos/datepicker/animation.html
@@ -10,7 +10,11 @@
 	<script src="../bootstrap.js" data-modules="effect effect-bounce effect-blind effect-bounce effect-clip effect-drop effect-fold effect-slide">
 		$( "#datepicker" ).datepicker();
 		$( "#anim" ).on( "change", function() {
-			$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
+			var value = $( this ).val(),
+				hideValue = $( this ).find( "option:selected" ).data( "hide" );
+			$( "#datepicker" )
+				.datepicker( "option", "show", value )
+				.datepicker( "option", "hide", hideValue || value );
 		});
 	</script>
 </head>
@@ -20,16 +24,15 @@
 
 <p>Animations:<br />
 	<select id="anim">
-		<option value="show">Show (default)</option>
-		<option value="slideDown">Slide down</option>
-		<option value="fadeIn">Fade in</option>
+		<option value="show">Fade in/out (default)</option>
+		<option value="slideDown" data-hide="slideUp">Slide down/up</option>
 		<option value="blind">Blind (UI Effect)</option>
 		<option value="bounce">Bounce (UI Effect)</option>
 		<option value="clip">Clip (UI Effect)</option>
 		<option value="drop">Drop (UI Effect)</option>
 		<option value="fold">Fold (UI Effect)</option>
 		<option value="slide">Slide (UI Effect)</option>
-		<option value="">None</option>
+		<option value="false">None</option>
 	</select>
 </p>