From c1cb6e3398cf3f68e25d375f1e2dce1830fc95f4 Mon Sep 17 00:00:00 2001
From: Felix Nagel <info@felixnagel.com>
Date: Tue, 11 Apr 2017 10:21:17 +0200
Subject: [PATCH 1/4] Calendar: Use widget extension to render year and month
 select

---
 demos/calendar/dropdown-month-year.html | 71 +++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 4 deletions(-)
diff --git a/demos/calendar/dropdown-month-year.html b/demos/calendar/dropdown-month-year.html
index 92b7e24fb60..e9571343f01 100644
--- a/demos/calendar/dropdown-month-year.html
+++ b/demos/calendar/dropdown-month-year.html
@@ -8,10 +8,73 @@
 	<link rel="stylesheet" href="../demos.css">
 	<script src="../../external/requirejs/require.js"></script>
 	<script src="../bootstrap.js">
-		$( "#calendar" ).calendar({
-			changeMonth: true,
-			changeYear: true
+		$.widget( "ui.calendar", $.ui.calendar, {
+			_buildTitle: function() {
+				var title = $( "<div>", { role: "alert", id: this.gridId + "-month-label" } ),
+					month = this._renderMonthSelect(),
+					year = this._renderYearSelect();
+
+				this._addClass( title, "ui-calendar-title" )
+					._addClass( month, "ui-calendar-month" )
+					._addClass( year, "ui-calendar-year" );
+
+				return title
+						.append( month )
+						.append( " " )
+						.append( year );
+			},
+			_renderMonthSelect: function() {
+				var select = $( "<select>" ),
+					date = this.date.clone(),
+					i = 0,
+					option;
+
+				this._on( select, {
+					change: function() {
+						this._off( select );
+						this.date.setFullDate( this.date.year(), select.val(), this.date.day() );
+						this._updateView();
+					}
+				} );
+
+				for ( ; i < 12; i++ ) {
+					date.setFullDate( select.val(), i, this.date.day() );
+					option = $( "<option>", { val: i, text: date.monthName() } );
+					if ( this.date.month() === i ) {
+						option.prop( "selected", true );
+					}
+					select.append( option );
+				}
+
+				return select;
+			},
+			_renderYearSelect: function() {
+				var current = new Date(),
+					select = $( "<select>" ),
+					i = current.getFullYear(),
+					option;
+
+				this._on( select, {
+					change: function() {
+						this._off( select );
+						this.date.setFullDate( select.val(), this.date.month(), this.date.day() );
+						this._updateView();
+					}
+				} );
+
+				for ( ;i <= current.getFullYear() + 10; i++ ) {
+					option = $( "<option>", { val: i, text: i } );
+					if ( this.date.year() === i ) {
+						option.prop( "selected", true );
+					}
+					select.append( option );
+				}
+
+				return select;
+			}
 		});
+
+		$( "#calendar" ).calendar();
 	</script>
 </head>
 <body>
@@ -19,7 +82,7 @@
 <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>
+<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.</p>
 </div>
 </body>
 </html>

From 5ee64dd0e0743643f3e314d898b45669b4db0a49 Mon Sep 17 00:00:00 2001
From: Felix Nagel <info@felixnagel.com>
Date: Wed, 12 Apr 2017 22:47:27 +0200
Subject: [PATCH 2/4] Calendar: Introduce build methods for year and month
 title

---
 demos/calendar/dropdown-month-year.html | 18 ++----------------
 ui/widgets/calendar.js                  | 12 ++++++++++--
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/demos/calendar/dropdown-month-year.html b/demos/calendar/dropdown-month-year.html
index e9571343f01..e1c03630ddb 100644
--- a/demos/calendar/dropdown-month-year.html
+++ b/demos/calendar/dropdown-month-year.html
@@ -9,21 +9,7 @@
 	<script src="../../external/requirejs/require.js"></script>
 	<script src="../bootstrap.js">
 		$.widget( "ui.calendar", $.ui.calendar, {
-			_buildTitle: function() {
-				var title = $( "<div>", { role: "alert", id: this.gridId + "-month-label" } ),
-					month = this._renderMonthSelect(),
-					year = this._renderYearSelect();
-
-				this._addClass( title, "ui-calendar-title" )
-					._addClass( month, "ui-calendar-month" )
-					._addClass( year, "ui-calendar-year" );
-
-				return title
-						.append( month )
-						.append( " " )
-						.append( year );
-			},
-			_renderMonthSelect: function() {
+			_buildTitleMonth: function() {
 				var select = $( "<select>" ),
 					date = this.date.clone(),
 					i = 0,
@@ -48,7 +34,7 @@
 
 				return select;
 			},
-			_renderYearSelect: function() {
+			_buildTitleYear: function() {
 				var current = new Date(),
 					select = $( "<select>" ),
 					i = current.getFullYear(),
diff --git a/ui/widgets/calendar.js b/ui/widgets/calendar.js
index df919cb998d..fb74f2a4882 100644
--- a/ui/widgets/calendar.js
+++ b/ui/widgets/calendar.js
@@ -366,8 +366,8 @@ return $.widget( "ui.calendar", {
 
 	_buildTitle: function() {
 		var title = $( "<div>", { role: "alert", id: this.gridId + "-month-label" } ),
-			month = $( "<span>" ).text( this.viewDate.monthName() ),
-			year = $( "<span>" ).text( this.viewDate.year() );
+			month = this._buildTitleMonth(),
+			year = this._buildTitleYear();
 
 		this._addClass( title, "ui-calendar-title" )
 			._addClass( month, "ui-calendar-month" )
@@ -379,6 +379,14 @@ return $.widget( "ui.calendar", {
 			.append( year );
 	},
 
+	_buildTitleMonth: function() {
+		return $( "<span>" ).text( this.viewDate.monthName() );
+	},
+
+	_buildTitleYear: function() {
+		return $( "<span>" ).text( this.viewDate.year() );
+	},
+
 	_buildGrid: function() {
 		var table = $( "<table>", {
 			role: "grid",

From 9bb209cc94872201ba9ede7c4966928c7e298623 Mon Sep 17 00:00:00 2001
From: Felix Nagel <info@felixnagel.com>
Date: Wed, 12 Apr 2017 23:12:44 +0200
Subject: [PATCH 3/4] Calendar: Introduce getter / setter for date and viewDate

---
 demos/calendar/dropdown-month-year.html |  20 +++--
 ui/widgets/calendar.js                  | 100 ++++++++++++++----------
 2 files changed, 73 insertions(+), 47 deletions(-)

diff --git a/demos/calendar/dropdown-month-year.html b/demos/calendar/dropdown-month-year.html
index e1c03630ddb..e305e879a6a 100644
--- a/demos/calendar/dropdown-month-year.html
+++ b/demos/calendar/dropdown-month-year.html
@@ -11,22 +11,26 @@
 		$.widget( "ui.calendar", $.ui.calendar, {
 			_buildTitleMonth: function() {
 				var select = $( "<select>" ),
-					date = this.date.clone(),
+					date = this._getDate().clone(),
 					i = 0,
 					option;
 
 				this._on( select, {
 					change: function() {
 						this._off( select );
-						this.date.setFullDate( this.date.year(), select.val(), this.date.day() );
+						this._getDate().setFullDate(
+							this._getDate().year(),
+							select.val(),
+							this._getDate().day()
+						);
 						this._updateView();
 					}
 				} );
 
 				for ( ; i < 12; i++ ) {
-					date.setFullDate( select.val(), i, this.date.day() );
+					date.setFullDate( select.val(), i, this._getDate().day() );
 					option = $( "<option>", { val: i, text: date.monthName() } );
-					if ( this.date.month() === i ) {
+					if ( this._getDate().month() === i ) {
 						option.prop( "selected", true );
 					}
 					select.append( option );
@@ -43,14 +47,18 @@
 				this._on( select, {
 					change: function() {
 						this._off( select );
-						this.date.setFullDate( select.val(), this.date.month(), this.date.day() );
+						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.date.year() === i ) {
+					if ( this._getDate().year() === i ) {
 						option.prop( "selected", true );
 					}
 					select.append( option );
diff --git a/ui/widgets/calendar.js b/ui/widgets/calendar.js
index fb74f2a4882..090610016e1 100644
--- a/ui/widgets/calendar.js
+++ b/ui/widgets/calendar.js
@@ -95,19 +95,19 @@ return $.widget( "ui.calendar", {
 
 		this._setLocale( this.options.locale, this.options.dateFormat );
 
-		this.date = new $.ui.date( this.options.value, this._calendarDateOptions );
-		this.viewDate = this.date.clone();
-		this.viewDate.eachDay = this.options.eachDay;
+		this._setDate( new $.ui.date( this.options.value, this._calendarDateOptions ) );
+		this._setViewDate( this._getDate().clone() );
+		this._getViewDate().eachDay = this.options.eachDay;
 
 		this._on( this.element, {
 			"click .ui-calendar-prev": function( event ) {
 				event.preventDefault();
-				this.date.adjust( "M", -this.options.numberOfMonths );
+				this._getDate().adjust( "M", -this.options.numberOfMonths );
 				this._updateView();
 			},
 			"click .ui-calendar-next": function( event ) {
 				event.preventDefault();
-				this.date.adjust( "M", this.options.numberOfMonths );
+				this._getDate().adjust( "M", this.options.numberOfMonths );
 				this._updateView();
 			},
 			"mousedown .ui-calendar-calendar button": "_select",
@@ -155,28 +155,28 @@ return $.widget( "ui.calendar", {
 			);
 			return;
 		case $.ui.keyCode.PAGE_UP:
-			this.date.adjust( pageAltKey ? "Y" : "M", -1 );
+			this._getDate().adjust( pageAltKey ? "Y" : "M", -1 );
 			break;
 		case $.ui.keyCode.PAGE_DOWN:
-			this.date.adjust( pageAltKey ? "Y" : "M", 1 );
+			this._getDate().adjust( pageAltKey ? "Y" : "M", 1 );
 			break;
 		case $.ui.keyCode.END:
-			this.date.setDay( this.date.daysInMonth() );
+			this._getDate().setDay( this._getDate().daysInMonth() );
 			break;
 		case $.ui.keyCode.HOME:
-			this.date.setDay( 1 );
+			this._getDate().setDay( 1 );
 			break;
 		case $.ui.keyCode.LEFT:
-			this.date.adjust( "D", -1 );
+			this._getDate().adjust( "D", -1 );
 			break;
 		case $.ui.keyCode.UP:
-			this.date.adjust( "D", -7 );
+			this._getDate().adjust( "D", -7 );
 			break;
 		case $.ui.keyCode.RIGHT:
-			this.date.adjust( "D", 1 );
+			this._getDate().adjust( "D", 1 );
 			break;
 		case $.ui.keyCode.DOWN:
-			this.date.adjust( "D", 7 );
+			this._getDate().adjust( "D", 7 );
 			break;
 		default:
 			return;
@@ -191,25 +191,27 @@ return $.widget( "ui.calendar", {
 	},
 
 	_updateView: function() {
-		if ( this.options.numberOfMonths > 1 && this.date.year() === this.viewDate.year() ) {
-			this.viewDate.adjust( "M", this.options.numberOfMonths *
-				( this.date.month() > this.viewDate.month() ? 1 : -1 )
+		if ( this.options.numberOfMonths > 1 &&
+			this._getDate().year() === this._getViewDate().year()
+		) {
+			this._getViewDate().adjust( "M", this.options.numberOfMonths *
+				( this._getDate().month() > this._getViewDate().month() ? 1 : -1 )
 			);
 		} else {
-			this.viewDate.setTimestamp( this.date.timestamp() );
+			this._getViewDate().setTimestamp( this._getDate().timestamp() );
 		}
 
 		this.refresh();
 	},
 
 	_needsRefresh: function() {
-		if ( this.date.month() !== this.viewDate.month() ||
-			this.date.year() !== this.viewDate.year()
+		if ( this._getDate().month() !== this._getViewDate().month() ||
+			this._getDate().year() !== this._getViewDate().year()
 		) {
 
 			// Check if the needed day is already present in our grid due
 			// to eachDay option changes (eg. other-months demo)
-			return !this._getDateElement( this._getDayId( this.date ) ).length;
+			return !this._getDateElement( this._getDayId( this._getDate() ) ).length;
 		}
 
 		return false;
@@ -220,7 +222,7 @@ return $.widget( "ui.calendar", {
 	},
 
 	_updateDayElement: function( state ) {
-		var id = this._getDayId( this.date ),
+		var id = this._getDayId( this._getDate() ),
 			button = this._getDateElement( id ).children( "button" );
 
 		this.grid.attr( "aria-activedescendant", id );
@@ -293,16 +295,16 @@ return $.widget( "ui.calendar", {
 	_buildMultiplePicker: function() {
 		var element, header,
 			rowBreak = $( "<div>" ),
-			currentDate = this.viewDate,
-			months = this.viewDate.months( this.options.numberOfMonths - 1 ),
+			currentDate = this._getViewDate(),
+			months = this._getViewDate().months( this.options.numberOfMonths - 1 ),
 			labelledBy = [],
 			i = 0;
 
 		for ( ; i < months.length; i++ ) {
 
 			// TODO: Shouldn't we pass date as a parameter to build* fns
-			// instead of setting this.date?
-			this.viewDate = months[ i ];
+			// instead of setting this.viewDate?
+			this._setViewDate( months[ i ] );
 			this.gridId = this.id + "-" + i;
 			labelledBy.push( this.gridId + "-title" );
 
@@ -326,7 +328,7 @@ return $.widget( "ui.calendar", {
 			.attr( "aria-labelledby", labelledBy.join( " " ) )
 			.append( rowBreak );
 
-		this.viewDate = currentDate;
+		this._setViewDate( currentDate );
 	},
 
 	_buildHeaderButtons: function() {
@@ -380,11 +382,11 @@ return $.widget( "ui.calendar", {
 	},
 
 	_buildTitleMonth: function() {
-		return $( "<span>" ).text( this.viewDate.monthName() );
+		return $( "<span>" ).text( this._getViewDate().monthName() );
 	},
 
 	_buildTitleYear: function() {
-		return $( "<span>" ).text( this.viewDate.year() );
+		return $( "<span>" ).text( this._getViewDate().year() );
 	},
 
 	_buildGrid: function() {
@@ -393,7 +395,7 @@ return $.widget( "ui.calendar", {
 			tabindex: 0,
 			"aria-readonly": true,
 			"aria-labelledby": this.gridId + "-month-label",
-			"aria-activedescendant": this._getDayId( this.date )
+			"aria-activedescendant": this._getDayId( this._getDate() )
 		} );
 
 		this._addClass( table, "ui-calendar-calendar" );
@@ -408,8 +410,8 @@ return $.widget( "ui.calendar", {
 			week = $( "<th>" ),
 			row = $( "<tr role='row'>" ),
 			i = 0,
-			weekDayLength = this.viewDate.weekdays().length,
-			weekdays = this.viewDate.weekdays();
+			weekDayLength = this._getViewDate().weekdays().length,
+			weekdays = this._getViewDate().weekdays();
 
 		if ( this.options.showWeek ) {
 			this._addClass( week, "ui-calendar-week-col" );
@@ -431,7 +433,7 @@ return $.widget( "ui.calendar", {
 	},
 
 	_buildGridBody: function() {
-		var days = this.viewDate.days(),
+		var days = this._getViewDate().days(),
 			i = 0,
 			rows = "";
 
@@ -492,7 +494,7 @@ return $.widget( "ui.calendar", {
 		var attributes, content,
 			classes = [ "ui-state-default" ];
 
-		if ( day === this.date && selectable ) {
+		if ( day === this._getDate() && selectable ) {
 			classes.push( "ui-state-focus" );
 		}
 		if ( this._isCurrent( day ) ) {
@@ -616,7 +618,7 @@ return $.widget( "ui.calendar", {
 	},
 
 	_headerButtonsState: function() {
-		var months = this.viewDate.months( this.options.numberOfMonths - 1 ),
+		var months = this._getViewDate().months( this.options.numberOfMonths - 1 ),
 			i = 0;
 
 		for ( ; i < months.length; i++ ) {
@@ -648,9 +650,9 @@ return $.widget( "ui.calendar", {
 		for ( ; i < this.options.numberOfMonths; i++ ) {
 			this.element.find( ".ui-calendar-title" ).eq( i ).replaceWith( this._buildTitle() );
 			this.element.find( ".ui-calendar-calendar" ).eq( i ).replaceWith( this._buildGrid() );
-			this.viewDate.adjust( "M", 1 );
+			this._getViewDate().adjust( "M", 1 );
 		}
-		this.viewDate.adjust( "M", -this.options.numberOfMonths );
+		this._getViewDate().adjust( "M", -this.options.numberOfMonths );
 	},
 
 	_getTranslation: function( key ) {
@@ -664,6 +666,22 @@ return $.widget( "ui.calendar", {
 		} );
 	},
 
+	_getDate: function() {
+		return this.date;
+	},
+
+	_setDate: function( date ) {
+		this.date = date;
+	},
+
+	_getViewDate: function() {
+		return this.viewDate;
+	},
+
+	_setViewDate: function( date ) {
+		this.viewDate = date;
+	},
+
 	value: function( value ) {
 		if ( arguments.length ) {
 			this.valueAsDate( this._parse( value ) );
@@ -730,11 +748,11 @@ return $.widget( "ui.calendar", {
 
 		if ( dateAttributes ) {
 			this._setLocale( this.options.locale, this.options.dateFormat );
-			this.date.setAttributes( this._calendarDateOptions );
-			this.viewDate.setAttributes( this._calendarDateOptions );
+			this._getDate().setAttributes( this._calendarDateOptions );
+			this._getViewDate().setAttributes( this._calendarDateOptions );
 		}
 		if ( create || refresh ) {
-			this.viewDate.setTimestamp( this.date.timestamp() );
+			this._getViewDate().setTimestamp( this._getDate().timestamp() );
 		}
 		if ( create ) {
 			this.element.empty();
@@ -750,7 +768,7 @@ return $.widget( "ui.calendar", {
 	_setOption: function( key, value ) {
 		if ( key === "value" ) {
 			if ( this._isValid( value ) ) {
-				this.date.setTimestamp( value.getTime() );
+				this._getDate().setTimestamp( value.getTime() );
 			} else {
 				value = null;
 			}
@@ -778,7 +796,7 @@ return $.widget( "ui.calendar", {
 		}
 
 		if ( key === "eachDay" ) {
-			this.viewDate.eachDay = value;
+			this._getViewDate().eachDay = value;
 		}
 	}
 } );

From d6de67a70a8caef3c6eb6d3247a9c3bee26e8d38 Mon Sep 17 00:00:00 2001
From: Felix Nagel <info@felixnagel.com>
Date: Wed, 12 Apr 2017 23:25:41 +0200
Subject: [PATCH 4/4] Calendar: Introduce getter / setter for grid id

---
 ui/widgets/calendar.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui/widgets/calendar.js b/ui/widgets/calendar.js
index 090610016e1..d9ed4dee30d 100644
--- a/ui/widgets/calendar.js
+++ b/ui/widgets/calendar.js
@@ -89,7 +89,7 @@ return $.widget( "ui.calendar", {
 
 	_create: function() {
 		this.id = this.element.uniqueId().attr( "id" );
-		this.gridId = this.id;
+		this._setGridId( this.id );
 		this.labels = this.options.labels;
 		this.buttonClickContext = this.element[ 0 ];
 
@@ -287,7 +287,7 @@ return $.widget( "ui.calendar", {
 
 		this._addClass( header, "ui-calendar-header-first ui-calendar-header-last" );
 		this.element
-			.attr( "aria-labelledby", this.gridId + "-title" )
+			.attr( "aria-labelledby", this._getGridId() + "-title" )
 			.append( header )
 			.append( this._buildGrid() );
 	},
@@ -305,8 +305,8 @@ return $.widget( "ui.calendar", {
 			// TODO: Shouldn't we pass date as a parameter to build* fns
 			// instead of setting this.viewDate?
 			this._setViewDate( months[ i ] );
-			this.gridId = this.id + "-" + i;
-			labelledBy.push( this.gridId + "-title" );
+			this._setGridId( this.id + "-" + i );
+			labelledBy.push( this._getGridId() + "-title" );
 
 			element = $( "<div>" );
 			this._addClass( element, "ui-calendar-group" );
@@ -353,7 +353,7 @@ return $.widget( "ui.calendar", {
 
 	_buildHeader: function() {
 		var header = $( "<div>" ),
-			title = $( "<div>", { role: "header", id: this.gridId + "-title" } ),
+			title = $( "<div>", { role: "header", id: this._getGridId() + "-title" } ),
 			notice = $( "<span>" ).text( ", " + this._getTranslation( "datePickerRole" ) );
 
 		this._addClass( header, "ui-calendar-header", "ui-widget-header ui-helper-clearfix" )
@@ -367,7 +367,7 @@ return $.widget( "ui.calendar", {
 	},
 
 	_buildTitle: function() {
-		var title = $( "<div>", { role: "alert", id: this.gridId + "-month-label" } ),
+		var title = $( "<div>", { role: "alert", id: this._getGridId() + "-month-label" } ),
 			month = this._buildTitleMonth(),
 			year = this._buildTitleYear();
 
@@ -394,7 +394,7 @@ return $.widget( "ui.calendar", {
 			role: "grid",
 			tabindex: 0,
 			"aria-readonly": true,
-			"aria-labelledby": this.gridId + "-month-label",
+			"aria-labelledby": this._getGridId() + "-month-label",
 			"aria-activedescendant": this._getDayId( this._getDate() )
 		} );
 
@@ -466,7 +466,7 @@ return $.widget( "ui.calendar", {
 				"role='gridcell'",
 				"aria-selected='" + ( this._isCurrent( day ) ? true : false ) + "'",
 				"aria-label='" + dayName + ", " + this._format( dateObject ) + "'",
-				"aria-describedby='" + this.gridId + "-month-label'"
+				"aria-describedby='" + this._getGridId() + "-month-label'"
 			],
 			selectable = ( day.selectable && this._isValid( dateObject ) );
 
@@ -666,6 +666,14 @@ return $.widget( "ui.calendar", {
 		} );
 	},
 
+	_getGridId: function() {
+		return this.gridId;
+	},
+
+	_setGridId: function( id ) {
+		this.gridId = id;
+	},
+
 	_getDate: function() {
 		return this.date;
 	},
