How to align Datepicker to text box right edge?

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 i开发者_JAVA百科ts text box?

---

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());
    }
});

---

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);
    }
});

---

Alex's solution was nice, but it didn't work well if you tried to resize window down. The problem was that jquery ui is trying to calculate position of widget, so that it never gets out of view. The thing is it doesn't work well with Alex's solution. I changed source code (which is not very nice, but only solution I came up with) to achieve the result. Here's the function on line 3960 that I changed:

/* Check positioning to remain on screen. */
    _checkOffset: function(inst, offset, isFixed) {
        // CHANGED This way I can add class date-right to the input to make it right aligned
        var isRightAlign = inst.input.hasClass('date-right');

        var dpWidth = inst.dpDiv.outerWidth();
        var dpHeight = inst.dpDiv.outerHeight();
        var inputWidth = inst.input ? inst.input.outerWidth() : 0;
        var inputHeight = inst.input ? inst.input.outerHeight() : 0;
        var viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft());
        var viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : $(document).scrollTop());

        // CHANGED Alex's solution is implemented on the next line (just add || isRightAlign)
        offset.left -= (this._get(inst, 'isRTL') || isRightAlign ? (dpWidth - inputWidth) : 0);
        offset.left -= (isFixed && offset.left == inst.input.offset().left) ? $(document).scrollLeft() : 0;
        offset.top -= (isFixed && offset.top == (inst.input.offset().top + inputHeight)) ? $(document).scrollTop() : 0;

        // CHANGED Do not check if datepicker is outside of the viewport if it's right aligned
        if(!isRightAlign){
            // now check if datepicker is showing outside window viewport - move to a better place if so.
            offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
                Math.abs(offset.left + dpWidth - viewWidth) : 0);
        }

        offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
            Math.abs(dpHeight + inputHeight) : 0);

        return offset;
    },

---

This has been answered here: https://stackoverflow.com/a/28113070/6173628

The orientation option is what works:

//datepicker
$('dob').on('click',function(){
    $('.datepicker').datepicker({
        "format": "dd/mm/yyyy",
         "autoclose": true,
         "orientation": right
    });
});

---

You can align jQuery UI date-picker from right side corresponding to input field.

[Here -176 is the width of my datepicker div, you can change according to your need.]

Please Check Running Demo

http://jsfiddle.net/VijayDhanvai/m795n3zx/

http://jsfiddle.net/m795n3zx/

$(document).ready(function () {
        $('#txtDateFrom,#txtDateTo').datepicker({
        changeYear: true,
        beforeShow: function (textbox, instance) {   
        instance.dpDiv.css({
            marginLeft: textbox.offsetWidth+ (-176) + 'px'
        });
        }
        });
    });

---

It's simple. You can do it by this way. The key is using margin-left rather changing left value. This code is working for responsive too. It means if there is not enough space in left side of textbox than it will render from left:0 rather than right:0 of textbox.

$(".date").datepicker({
         dateFormat: "yy-mm-dd",
         changeYear: true,
         minDate:0,
         yearRange: "+0:+2",
         beforeShow: function (textbox, instance) {
            marginLeftDatepicker=  $(instance.dpDiv).outerWidth() - 
         $(textbox).outerWidth()
            datePickerWidth = $(instance.dpDiv).outerWidth();
              var datepickerOffset = $(textbox).offset();
              if(datepickerOffset.left > datePickerWidth){ // this condition 
            will allign right 0 according to textbox
                  instance.dpDiv.css({
                 marginLeft: -marginLeftDatepicker + 'px'
                });
              } else { // for resize if you resize and dont have enough 
             space to align from righ so keep it allign left
                instance.dpDiv.css({
                 marginLeft: 0
                });
              }
            }
    });

This is most suitable way out of many available.

---

Improving Alex Barker's answer when window is small enough to shift the widget.

$('.date').datepicker({
    beforeShow: function(input, inst) {
        var widget = $(instance).datepicker('widget');
        var marginLeft = $(input).outerWidth() - widget.outerWidth();
        if ($(input).offset().left + $(widget).outerWidth() > $(window).width()) {
                    marginLeft += ($(input).offset().left + $(widget).outerWidth()) - $(window).width();
        }
        marginLeft = marginLeft > 0 ? 0: marginLeft;
        widget.css('margin-left', marginLeft);
   }
});

---

options.widgetPositioning={
                horizontal:'right'
                ,vertical: 'auto'
            };

cf. https://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning

---

Simply, you can set the rtl(Arabin way) option in the jQuery. Search for isRTL, then change the value from false to true. ( isRTL:true )

If you only need to align whole popup box, well, then simply set rtl option and remove the direction attribute in the custom css. Eg: .ui-datepicker-rtl { }

But, this will not set to arrows to navigate through months. If you need that functionality as well, then you have to do more work. You have to edit the core functionality related to rtl(search for isrtl and change values accordingly) & changing the css related to rtl.