Date-picker is shown in the left offset, how to show it in the right?

Question

I am trying to find here http://jqueryui.com/demos/datepicker/#options how to initialize/show the datepicker according to the right offset

(I was performing a demo but i dont know why this fiddle does not work http://jsfiddle.net/vybbh/2/ )

Anyone knows how to customize the position of the calendar?

EDIT

$(function()
{
$('.date-pick')
    .datePicker({clickInput:true})
    .bind('click',
            function()
            {
                left = $('#dp-popup').css('left');
                $('#dp-popup').css({'left':left+55});
                /*left = $('#dp-popup').css('left')+55;
                $('#dp-popup').css({'left':left});*/
            }
        )
});

found this but the +55 is not making any effect

Answer 1

One way to do it is to move the input across by the required numbers of pixels, and then move the calendar popup back by the same amount of pixels:

#date1 {margin-left:160px; }
#ui-datepicker-div {margin-left:-160px; }

Updated (and slightly simplified) jsfiddle: http://jsfiddle.net/vybbh/9/

Answer 2

I've figured it out for you!

Here is the fiddle: http://jsfiddle.net/vybbh/20/

And here is the code:

$(function() {

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

});

Apparently they thought of this, and created the isRTL option. True means right to left, false means left to right.

Also, even with the default of isRTL: false , the calendar will display from the right edge if it is pushed up against the right side of the screen.