Get the Height and Width of a jQuery UI Datepicker

Question

I'm using the jQuery UI Datepicker widget. When the user changes the month or year on the widget my code makes an ajax request to the server to get the highlighted dates for that month/year. In order to give the user an indication that the webpage is waiting for the server I'm trying to grey out the datepicker and display a loading image. I can already do all of this, except, I'm having problems getting the height and width of the greyed out section to match the height and width of the datepicker widget.

Because the datepicker's height can change based on the number of weeks in a month each time I called the overlay I was trying to use jQuery to get the height of the widget and then display the overlay. However, the height never seems to match the actual height of the datepicker. Here are the two ways I've tried setting the height.

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

and

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

Neither of which work. Does anyone know a way I can programmatically get the height and width of a jQuery UI Datepicker widget?

Answer 1

This is a long shot as I can't tell exactly what you mean by the height never seems to match the actual height , other than it's not covering the whole datepicker. A solution to this may be outerWidth() and outerHeight() . These functions get the width of the element including border, padding and (optionally) margins:

$('#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) means "get the height plus padding and border, but leave out the margin". Set it to true if you want to include the margin too.

Answer 2

height() works fine, the problem was that someone else had edited the file and added padding without my knowledge. So when I set the height it always had a bunch of extra pixels added, making my overlay too large for the datepicker widget. In addition it is sufficient to select .ui-datepicker-inline . So my final jQuery code is:

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