How to align Datepicker to text box right edge?

Question

I have jQuery UI Datepicker on the top right edge of my layout.
By default, it opens aligned to the left edge of its text box.
Thus, it falls out of the layout:

How to make it open aligned to the right border of its text box?

Answer 1

It took me a while to figure this out.

$('.date').datepicker({
    beforeShow: function(input, inst) {
        var widget = $(inst).datepicker('widget');
        widget.css('margin-left', $(input).outerWidth() - widget.outerWidth());
    }
});

Answer 2

I know it's an old question... but still not native solution... here's an updated piece of code:

$('.datepicker').datepicker({
    beforeShow:function( input, inst )
    {
        var dp = $(inst.dpDiv);
        var offset = $(input).outerWidth(false) - dp.outerWidth(false);
        dp.css('margin-left', offset);
    }
});