1 files changed, 82 insertions, 0 deletions
diff --git a/demos/calendar/dropdown-month-year.html b/demos/calendar/dropdown-month-year.html
new file mode 100644
index 000000000..e305e879a
--- /dev/null
+++ b/demos/calendar/dropdown-month-year.html
@@ -0,0 +1,82 @@
+<!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 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">
+		$.widget( "ui.calendar", $.ui.calendar, {
+			_buildTitleMonth: function() {
+				var select = $( "<select>" ),
+					date = this._getDate().clone(),
+					i = 0,
+					option;
+
+				this._on( select, {
+					change: function() {
+						this._off( select );
+						this._getDate().setFullDate(
+							this._getDate().year(),
+							select.val(),
+							this._getDate().day()
+						);
+						this._updateView();
+					}
+				} );
+
+				for ( ; i < 12; i++ ) {
+					date.setFullDate( select.val(), i, this._getDate().day() );
+					option = $( "<option>", { val: i, text: date.monthName() } );
+					if ( this._getDate().month() === i ) {
+						option.prop( "selected", true );
+					}
+					select.append( option );
+				}
+
+				return select;
+			},
+			_buildTitleYear: function() {
+				var current = new Date(),
+					select = $( "<select>" ),
+					i = current.getFullYear(),
+					option;
+
+				this._on( select, {
+					change: function() {
+						this._off( select );
+						this._getDate().setFullDate(
+							select.val(),
+							this._getDate().month(),
+							this._getDate().day()
+						);
+						this._updateView();
+					}
+				} );
+
+				for ( ;i <= current.getFullYear() + 10; i++ ) {
+					option = $( "<option>", { val: i, text: i } );
+					if ( this._getDate().year() === i ) {
+						option.prop( "selected", true );
+					}
+					select.append( option );
+				}
+
+				return select;
+			}
+		});
+
+		$( "#calendar" ).calendar();
+	</script>
+</head>
+<body>
+
+<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.</p>
+</div>
+</body>
+</html>