library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

datepicker: Fixes regression in #3232 [datepicker position problem in IE 6/7]: added back functionality to detect whether the datepicker displays outside a viewpoint. Additionally if the viewpoint is too small to fit the datepicker it will show in its usual position regardless. I have also added a visual test case for this.

Browse Source
This commit is contained in:
Ca-Phun Ung 2009-01-04 15:13:01 +00:00
parent edc6f634dc
commit acbe714b53
2 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
tests/visual/datepicker.html
View File

@ -56,7 +56,9 @@
// disabled input datepicker // disabled input datepicker
$('#d3').datepicker(); $('#d3').datepicker();
// bottom-right datepicker
$('#d4').datepicker({numberOfMonths: 3});
}); });
</script> </script>
</head> </head>
@ -96,6 +98,12 @@
<div> <div>
<input type="text" id="d3" disabled="disabled" /> <input type="text" id="d3" disabled="disabled" />
</div> </div>
</li>
<li class="plugin" style="position: absolute; right: 0; bottom: 0; height: 40px">
Datepicker - positioned bottom-right
<div>
<input type="text" id="d4">
</div>
</li> </li>
</ul> </ul>

18
ui/ui.datepicker.js
View File

@ -608,10 +608,22 @@ $.extend(Datepicker.prototype, {
}, },
/* Check positioning to remain on screen. */ /* Check positioning to remain on screen. */
_checkOffset: function(inst, offset, isFixed) { _checkOffset: function(inst, offset, isFixed) {
offset.left -= (this._get(inst, 'isRTL') ? (inst.dpDiv.outerWidth() - inst.input.outerWidth()) : 0); var dpWidth = inst.dpDiv.outerWidth();
var dpHeight = inst.dpDiv.outerHeight();
var inputWidth = inst.input ? inst.input.outerWidth() : 0;
var inputHeight = inst.input ? inst.input.outerHeight() : 0;
var viewWidth = window.innerWidth || document.documentElement.clientWidth;
var viewHeight = window.innerHeight || document.documentElement.clientHeight;
offset.left -= (this._get(inst, 'isRTL') ? (dpWidth - inputWidth) : 0);
offset.left -= (isFixed && offset.left == inst.input.offset().left) ? $(document).scrollLeft() : 0; offset.left -= (isFixed && offset.left == inst.input.offset().left) ? $(document).scrollLeft() : 0;
offset.top -= (isFixed && offset.top == (inst.input.offset().top + inst.input.outerHeight())) ? $(document).scrollTop() : 0; offset.top -= (isFixed && offset.top == (inst.input.offset().top + inputHeight)) ? $(document).scrollTop() : 0;
// now check if datepicker is showing outside window viewpoint - move to a better place if so.
offset.left -= (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0;
offset.top -= (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) : 0;
return offset; return offset;
}, },