Calendar / Datepicker: Fixes focus and tab index handling

Gruntfile.js

@@ -163,7 +163,12 @@ grunt.initConfig({
 				findNestedDependencies: true,
 				skipModuleInsertion: true,
 				exclude: [ "jquery" ],
-				include: expandFiles( [ "ui/**/*.js", "!ui/core.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 ),
@@ -261,6 +266,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-runtime.js": "globalize/dist/globalize-runtime.js",
+				"globalize/globalize-runtime/number.js": "globalize/dist/globalize-runtime/number.js",
+				"globalize/globalize-runtime/date.js": "globalize/dist/globalize-runtime/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",
@@ -422,6 +437,41 @@ grunt.registerTask( "update-authors", function() {
 	});
 });
 
+grunt.registerTask( "compile-globalize", function() {
+	var formatters,
+		Globalize = require( "globalize" ),
+		globalizeCompiler = require( "globalize-compiler" ),
+		cldrData = require( "cldr-data" ),
+		languages = [ "ar", "en", "de", "es", "zh" ];
+
+	Globalize.load( cldrData.entireMainFor.apply( this, languages ) );
+	Globalize.load( cldrData.entireSupplemental() );
+
+	formatters = languages.reduce( function( ret, language ) {
+		var globalize = new Globalize( language );
+
+		ret = ret.concat([
+			globalize.dateFormatter( { raw: "EEEEEE" } ),
+			globalize.dateFormatter( { raw: "EEEEE" } ),
+			globalize.dateFormatter( { raw: "EEEE" } ),
+			globalize.dateFormatter( { raw: "MMMM" } ),
+			globalize.dateFormatter( { raw: "w" } ),
+			globalize.dateFormatter( { raw: "c" } ),
+			globalize.dateFormatter( { date: "short" } ),
+			globalize.dateParser( { date: "short" } ),
+			globalize.dateFormatter( { date: "long" } ),
+			globalize.dateParser( { date: "long" } ),
+			globalize.dateFormatter( { date: "full" } ),
+			globalize.dateParser( { date: "full" } ),
+			globalize.numberParser()
+		]);
+
+		return ret;
+	}, [] );
+
+	grunt.file.write( "external/localization.js", globalizeCompiler.compile( formatters ) );
+});
+
 grunt.registerTask( "default", [ "lint", "requirejs", "test" ]);
 grunt.registerTask( "jenkins", [ "default", "concat" ]);
 grunt.registerTask( "lint", [ "asciilint", "jshint", "jscs", "csslint", "htmllint" ]);

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": "globalize#1.1.0-rc.6",
 
 		"jquery-1.7.0": "jquery#1.7.0",
 		"jquery-1.7.1": "jquery#1.7.1",

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",

demos/bootstrap.js

@@ -30,6 +30,7 @@ var widgets = [
 	"accordion",
 	"autocomplete",
 	"button",
+	"calendar",
 	"checkboxradio",
 	"controlgroup",
 	"datepicker",
@@ -80,12 +81,20 @@ document.documentElement.className = "demo-loading";
 require.config( {
 	baseUrl: window.location.pathname.indexOf( "demos/" ) !== -1 ? "../../ui" : "../../../ui",
 	paths: {
+		cldr: "../external/cldrjs/cldr",
+		"globalize-runtime": "../external/globalize/globalize-runtime",
+		"globalize-locales": "../external/localization",
 		jquery: "../external/jquery/jquery",
 		external: "../external/"
 	},
+	map: {
+		"*": {
+			"globalize": "globalize-runtime"
+		}
+	},
 	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" ]
 	}
 } );
 

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>

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>

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>

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>

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">
+		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>

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>

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>

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>

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>