如何将 Datepicker 与文本框右边缘对齐?

Posted

技术标签:

【中文标题】如何将 Datepicker 与文本框右边缘对齐?【英文标题】:How to align Datepicker to text box right edge? 【发布时间】:2011-03-04 21:14:39 【问题描述】:

我的布局右上角有 jQuery UI Datepicker。 默认情况下,它会与其文本框的左边缘对齐打开。 因此,它脱离了布局:

如何使其打开与其文本框的右边框对齐?

【问题讨论】:

【参考方案1】:

我花了一段时间才弄明白。

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

【讨论】:

如果您在一个页面上有 2 个日期选择器字段,一旦您使用此脚本打开一个,所有其他日期选择器字段都会右对齐。 如果widget左侧位置由于窗口较小已经调整过,margin-left设置太多了。【参考方案2】:

我知道这是一个老问题......但仍然不是原生解决方案......这是一段更新的代码:

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

【讨论】:

【参考方案3】:

Alex 的解决方案很好,但如果您尝试缩小窗口大小,它就无法正常工作。问题是 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;
    ,

【讨论】:

【参考方案4】:

这里已经回答了这个问题:https://***.com/a/28113070/6173628

方向选项是有效的:

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

【讨论】:

我相信这个答案适用于引导日期选择器,而 op 询问 jQuery UI 日期选择器。【参考方案5】:

您可以从对应输入字段的右侧对齐 jQuery UI 日期选择器。

[这里-176是我的datepicker 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'
        );
        
        );
    );

【讨论】:

【参考方案6】:

这很简单。你可以通过这种方式做到这一点。关键是使用 margin-left 而不是改变 left 值。此代码也适用于响应式。这意味着如果文本框左侧没有足够的空间,它将从文本框的左侧:0 而不是右侧:0 呈现。

$(".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
                );
              
            
    );

这是众多可用方法中最合适的方法。

【讨论】:

【参考方案7】:

当窗口小到足以移动小部件时改进 Alex Barker 的答案。

$('.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);
   
);

【讨论】:

【参考方案8】:
options.widgetPositioning=
                horizontal:'right'
                ,vertical: 'auto'
            ;

参见。 https://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning

【讨论】:

【参考方案9】:

很简单,你可以在 jQuery 中设置 rtl(Arabin way) 选项。搜索 isRTL,然后将值从 false 更改为 true。 (isRTL:true)

如果您只需要对齐整个弹出框,那么只需设置 rtl 选项并删除 自定义 CSS 中的方向属性。 例如:.ui-datepicker-rtl

但是,这不会设置为导航月份的箭头。如果您也需要该功能,那么您必须做更多的工作。您必须编辑与 rtl 相关的核心功能(搜索 isrtl 并相应地更改值)并更改与 rtl 相关的 css。

【讨论】:

它的废话和恢复到 rtl 模式只是为了右对齐的技巧

以上是关于如何将 Datepicker 与文本框右边缘对齐?的主要内容,如果未能解决你的问题,请参考以下文章

html中怎么将标签左对齐,而文本框右对齐的方法

app页面用css 的direction 属性解决select 下拉框右对齐

将 SwiftUI 文本与另一个文本的基线和顶部对齐

如何将底部边缘与上方视图的中心对齐 swiftui

在kivy中将文本与ScrollView中的标签边缘对齐

关于align="absmiddle"的说明