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 = $( "" ).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() ); + } } });