How can I have the jQuery UI Datepicker appear to the left of the input field?

The project I'm working on uses IE8, frames and absolute positioning. One of the frames is too small but I cannot change the size due to requirements of the project. I've included the jQuery UI datepicker but it appears directly over the field (no room above or below for it to appear).

I want to instead have the datepicker display off to the left hand side of the input. Is there a way I can do this? I've tried this code so far in a test page but still cannot get the position changed from below.

      $(".date").datepicker({
        changeYear: true,
        dateFormat: 'mm/dd/yy',
        constr开发者_运维技巧ainInput: true,
        yearRange: 'c-125:c+125',
        showAnim: "", 
        showOptions: { direction: "up" }
      });

You can use isRTL property of datepicker something like:

$('#datepicker').datepicker({
    isRTL: true,
    ...
});

More information can be found @ http://api.jqueryui.com/datepicker/#option-isRTL

Wrap the datetime picker into a div/span/p with some id to it. Apply the direction property in css for the div >>

for ex:

HTML code:

<div id="dtPicker">Date:
    <input type="text" id="datepicker"/>
</div>

CSS:

div#dtPicker {
    direction: rtl;
}

JS:

$("#datepicker").datepicker({
    showOn: "button",
    buttonImage: "../../icon.png",
    buttonImageOnly: true
});

The icon should appear on left of the input field. :)

Or in your custom css you can override the jQuery ui css for the image.

.ui-datepicker-trigger {
    float: left;
}