Datepicker: Support `position` option changes after init

2 files changed, 36 insertions, 7 deletions

diff --git a/tests/unit/datepicker/datepicker_options.js b/tests/unit/datepicker/datepicker_options.js
index 67302345c..9218303ed 100644
--- a/tests/unit/datepicker/datepicker_options.js
+++ b/tests/unit/datepicker/datepicker_options.js
@@ -52,8 +52,32 @@ test( "numberOfMonths", function() {
 	expect( 0 );
 });
 
-test( "position", function() {
-	expect( 0 );
+asyncTest( "position", function() {
+	expect( 3 );
+	var input = $( "<input>" ).datepicker().appendTo( "body" ).css({
+			position: "absolute",
+			top: 0,
+			left: 0
+		}),
+		container = input.datepicker( "widget" );
+
+	input.datepicker( "open" );
+	setTimeout(function() {
+		closeEnough( input.offset().left, container.offset().left, 1, "left sides line up by default" );
+		closeEnough( container.offset().top, input.offset().top + input.outerHeight(), 1,
+			"datepicker directly under input by default" );
+
+		// Change the position option using option()
+		input.datepicker( "option", "position", {
+			my: "left top",
+			at: "right bottom"
+		});
+		closeEnough( container.offset().left, input.offset().left + input.outerWidth(), 1,
+			"datepicker on right hand side of input after position change" );
+
+		input.remove();
+		start();
+	});
 });
 
 test( "showWeek", function() {
diff --git a/ui/datepicker.js b/ui/datepicker.js
index 7264a556e..6839ca7e4 100644
--- a/ui/datepicker.js
+++ b/ui/datepicker.js
@@ -557,15 +557,11 @@ $.widget( "ui.datepicker", {
 		this.date.select();
 		this.refresh();
 
-		var position = $.extend( {}, {
-			of: this.element
-		}, this.options.position );
-
 		this.picker
 			.attr( "aria-hidden", "false" )
 			.attr( "aria-expanded", "true" )
 			.show()
-			.position( position )
+			.position( this._buildPosition() )
 			.hide();
 
 		this._show( this.picker, this.options.show );
@@ -595,6 +591,11 @@ $.widget( "ui.datepicker", {
 			.attr( "aria-hidden", "true" )
 			.attr( "aria-expanded", "false" );
 	},
+	_buildPosition: function() {
+		return $.extend( {}, {
+			of: this.element
+		}, this.options.position );
+	},
 	select: function( event, time ) {
 		this.date.setTime( time ).select();
 		this.refresh();
@@ -629,6 +630,10 @@ $.widget( "ui.datepicker", {
 		if ( key === "showWeek" ) {
 			this.refresh();
 		}
+
+		if ( key === "position" ) {
+			this.picker.position( this._buildPosition() );
+		}
 	}
 });