获取jQuery UI Datepicker的高度和宽度

Question

我正在使用jQuery UI Datepicker小部件。 当用户更改窗口小部件上的月份或年份时，我的代码向服务器发出ajax请求，以获取该月/年的突出显示日期。 为了向用户提供网页正在等待服务器的指示，我正试图使日期选择器变灰并显示加载图像。 我已经可以完成所有这些了，除了我在获取灰色部分的高度和宽度以匹配datepicker小部件的高度和宽度方面遇到了问题。

因为每次调用叠加层时，日期选择器的高度可以根据一个月内的周数来改变，所以我试图使用jQuery来获取窗口小部件的高度，然后显示叠加层。 但是，高度似乎永远不会与日期选择器的实际高度相匹配。 以下是我尝试设置高度的两种方法。

$('#loading').height($('.ui-datepicker-calendar').height() + $('.ui-datepicker-header').height())

和

$('#loading').height($('.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all').height())

两者都不奏效。 有没有人知道我可以通过编程方式获取jQuery UI Datepicker小部件的高度和宽度？

Answer 1

这是一个很长的镜头，因为我无法准确地说出你的意思， the height never seems to match the actual height ，除了它没有覆盖整个日期选择器。 对此的解决方案可能是outerWidth()和outerHeight() 。 这些函数获取元素的宽度， 包括边框，填充和（可选）边距：

$('#loading').height($('.ui-datepicker-calendar').outerHeight(false) + $('.ui-datepicker-header').outerHeight(false))

$('#loading').height($('.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all').outerHeight(false))

outerHeight(false)表示“获取高度加上填充和边框，但省略边距”。 如果要包含边距，请将其设置为true 。

Answer 2

height()工作正常，问题是其他人编辑了文件并在我不知情的情况下添加了填充。 因此，当我设置高度时，它总是添加了一堆额外的像素，使得我的叠加层对于datepicker小部件来说太大了。 另外，选择.ui-datepicker-inline就足够了。 所以我最后的jQuery代码是：

$('#loading').height($('.ui-datepicker-inline').height());