How to Style the Trigger Button Image of a jQuery Datehandler

By | April 16, 2009

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:

Misand poorly spaced datepicker trigger image

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

After ui-datepicker-trigger style applied

15 thoughts on “How to Style the Trigger Button Image of a jQuery Datehandler

  1. fbloggs

    Update: this only works in FireFox. In IE, the button does not align vertically.

  2. Pingback: How to Style the Trigger Button Image of a jQuery Datehandler « fbloggs blog

  3. Dave

    Thanks! This worked for me both in IE 6 and Firefox 3.01.

  4. John

    Thanks, this worked for me as well using IE 8. Truly appreciate the help.

  5. foosh

    Awesome! Thanks, just what I needed 🙂

  6. bangtech

    You may add the following styles
    .ui-datepicker-trigger { margin-left:3px; }
    .hasDatepicker { vertical-align:top }

  7. murph

    Thanks for the info – this is exactly what I needed. Because they ended up looking a bit different I used bangtech’s suggestion, except I just combined them and it worked just the same, as far as I could tell, in FF4 and IE8.

    .ui-datepicker-trigger {
    margin-left:1px;
    vertical-align:top;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.