如何將Datepicker與文本框右邊緣對齊？

Question

我的佈局右上角有jQuery UI Datepicker。
默認情況下，它將與其文本框的左邊緣對齊打開。
因此，它掉下來佈局：

如何使它打開對齊到它的文本框的右邊界？

Answer 1

簡而言之，您可以在jQuery中設置rtl（阿拉伯方式）選項。搜索isRTL，然後將值從false更改爲true。 （isRTL：true）

如果您只需要對齊整個彈出框，那麼只需簡單地設置rtl選項並刪除自定義CSS中的 方向屬性。 例如：.ui-datepicker-rtl {}

但是，這不會設置爲箭頭來瀏覽幾個月。如果你還需要這個功能，那麼你必須做更多的工作。您必須編輯與rtl相關的核心功能（搜索isrtl並相應更改值）&更改與rtl相關的css。

Answer 2

我花了一段時間才弄清楚。

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

Answer 3

亞歷克斯的解決方案很好，但如果您嘗試調整窗口大小，它的效果不佳。問題是，jquery ui試圖計算小部件的位置，所以它永遠不會出現。問題在於它不適合Alex的解決方案。我改變了源代碼（這不是很好，但只有我提出的解決方案）才能實現結果。下面是對3960線的功能，我改變：

/* 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; 
    }, 

Answer 4

我知道這是個老問題了......但還是沒有原生解決方案......這裏是一個更新的一條代碼：

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

Answer 5

你可以對齊與輸入字段對應的右側的jQuery UI日期選擇器。

[-176這裏是我的日期選擇器div的寬度，你可以根據你的需要而改變。]

請檢查運行演示

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

Answer 6

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

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

Answer 7

這已經在這裏找到答案：https://stackoverflow.com/a/28113070/6173628

的方向選擇是什麼在起作用：

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