强制 jQuery UI Datepicker 在输入字段下方显示

Posted 2023-05-07

【中文标题】强制 jQuery UI Datepicker 在输入字段下方显示

【英文标题】：Force jQuery UI Datepicker to display below input field

【发布时间】：2016-11-18 20:30:27

【问题描述】：

我有一个页面，其中包含一个表单和几个字段。我的问题如下：

我正在尝试强制 jQuery UI 日期选择器显示在输入字段下方。 当我单击输入字段时，我希望该字段也滚动到页面顶部。我想我有这个工作。

这是我的 jQuery：

JQUERY：

$( document ).ready(function() 
    // Set Datepicker
    $(".datepicker").datepicker();

    $("input").focus(function () 
       $('html, body').animate( scrollTop: $(this).offset().top - 25 , 10);
   );

);

小提琴链接： https://jsfiddle.net/MauriceT/0qfycgm1/10/

这是我想要避免的：

Datepicker displays above the input field

任何建议将不胜感激。谢谢！

【问题讨论】：

输入下方是什么意思？您希望输入字段覆盖在日期选择器上吗？

所以无论如何我都需要日期选择器显示在字段下方。此时，如果您单击日期选择器并且该字段上方有空格，则日期选择器将出现在该字段上方。单击我的问题图像中的链接以获得视觉效果。谢谢！

【参考方案1】：

你可以通过设置日期选择器pop的css来实现你的目标。

使用下面的代码设置CSS，使用setTimeout是为了避免覆盖CSS。

在这里我找出日期时间选择器文本框的顶部和左侧，并使用这些值来设置日期时间选择器弹出窗口的位置

关于 beforeShow 事件的信息在这里查看。

https://api.jqueryui.com/datepicker/#option-beforeShow

    $(".datepicker").datepicker(
    beforeShow: function (input, inst) 
        setTimeout(function () 
            inst.dpDiv.css(
                top: $(".datepicker").offset().top + 35,
                left: $(".datepicker").offset().left
            );
        , 0);
    
); 

这里是小提琴：https://jsfiddle.net/0qfycgm1/14/

【讨论】：

感谢@Deep。你能解释一下你对 setTimeout 的使用吗？谢谢。

【参考方案2】：

一个简单的解决方法是使用 CSS 为日历框调整前端。

将以下内容添加到您的 CSS 文件中。

    .ui-datepicker
        margin-top: 300px;
    

我在您的 Fiddle 链接中尝试过，效果很好。

【讨论】：

感谢您的回复，安库什！但是，我不确定这是一个可靠的解决方案，因为如果我向下滚动页面并选择日期选择器，日期选择器将出现在字段下方 300 像素处。我需要一些更有活力的东西。

据我了解，日历框出现在日期选择器输入字段上方，但您希望它显示在它下方。？是这样，还是你想要别的东西？

哦，我得到了你提到的 SCROLL 问题。并且在 top-margin: 0px 的情况下仍然存在，因此 Jayanti Lal 的解决方案也不能正常工作。

看看这个***.com/questions/15131465/…和@Deep指定的一样

谢谢你，安库什！我已将@Deep 的答案标记为已解决的答案。

【参考方案3】：

添加

       ui-datepicker
          margin-top: 0px;
          

我已将此代码添加到您的小提琴中并进行了测试。希望这会有所帮助。 已更新您的fiddle

【参考方案4】：

jquery-ui-(version) 中的以下代码行将您的对象顶部位置设置为零，因此显示错误。注释您将获得所需内容的代码行。我花了很多天发现没有比这更好的解决方案了。

offset = $.datepicker._checkOffset(inst, offset, isFixed);