Fbloggs Geekdom

The jQuery UI datepicker object has lots of CSS style settings you can customize. Most of these apply to the calendar that appears, though. In a recent project I was using the standard image shown on the datepicker examples page for the trigger button. This appears when you set the  button image properties, like this:

buttonImage: 'images/calendar.gif',  buttonImageOnly: true

However, the image didn’t line up vertically with my input field, and it was squished too close to the input field’s right border.

Here’s the problem:

Misaligned and poorly spaced datepicker trigger image

So I needed to style it.  I couldn’t find anything in the documentation or the style sheets that told me how to do this, so I looked at the generated HTML with FireFox debugger and discovered the button uses a class of   ui-datepicker-trigger .  To correct the problem, I created the style directly in the page, following the included jQuery style sheets. Here’s the selector:

<style>
/* This is the style for the trigger icon. The margin-bottom value causes the icon to shift down to center it. */
.ui-datepicker-trigger {
                               margin-left:5px;
                               margin-top: 8px;
                               margin-bottom: -3px;
                              }
</style>

The margin-left value put some white space between the right edge of the input field and the image, while the margin-bottom value of -3 shifted the icon down slightly. The margin-top value caused both the input field and the icon to shift down 8 pixels, providing white space between the datepicker and the stuff above it. Here’s the result:

After ui-datepicker-trigger style applied

This entry was posted on Thursday, April 16th, 2009 at 11:30 am and is filed under CSS, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.