强制 Jquery-UI Datepicker 在 Input 下打开？答案

【问题标题】：Force Jquery-UI Datepicker to open under the Input?强制 Jquery-UI Datepicker 在 Input 下打开？
【发布时间】：2018-01-06 17:56:09
【问题描述】：

我正在使用带有 Jquery-Ui 的 Datepicker，我需要它始终显示在输入下方。

我查看了 API 文档，在 Google 上搜索并在 Stackoverflow 上搜索，但找不到解决方案：我尝试了以下代码：

popup: {
    position: "bottom left",
    origin: "top left"
},

orientation: "bottom",

有人知道怎么做吗？

【问题讨论】：

jQury UI DatePicker 没有popup 选项。所以我有点困惑。它确实有一个showOptions 选项。我认为这会有所帮助：api.jqueryui.com/datepicker/#option-showOptions
您也可以使用.position()。这可能有点难做，但可以做到。
创建一个重现问题的演示。默认情况下，jQueryUI 日期选择器已经在输入下打开。听起来您正在使用不同的插件或有 css 冲突
这里是一个CodePen，问题被转载。
@Twisty 我用“down”尝试了showOptions，也没有用

标签： jquery html jquery-ui

【解决方案1】：

可以使用内联日期选择器来做到这一点。

工作示例：https://jsfiddle.net/0e3njzoe/2/

HTML

<div class="tall">
  Tall Div
</div>
<label for="myDate">Date</label>
<input type="text" id="myDate" />
<div id="myDatePicker"></div>

JavaScript

$(function() {
  $("#myDatePicker").datepicker({
    onSelect: function(date) {
      $("#myDate").val(date);
      $("#myDatePicker").hide();
    }
  }).position({
    my: "left top",
    at: "left bottom",
    of: $("#myDate"),
    collision: "none"
  }).hide();
  $("#myDate").focus(function() {
    $("#myDatePicker").show();
  })
});

您可以将日期选择器放置在任何地方，然后使用.position() 将其放置在输入字段下方。默认情况下，如果检测到碰撞，它将尝试翻转。您可以将其关闭。查看更多：http://api.jqueryui.com/position/

管理起来有点额外的工作，但它可以为您提供所需的控制。

【讨论】：

【解决方案2】：

Twistys 答案的替代答案。

默认情况下，Jquery UI Datepicker 在输入下显示日历，如果没有，通常它在输入下根本没有空间，就像我的情况一样。

所以只需更改 Datepicker 的大小，它就会显示在输入下方。

<style>.ui-datepicker {font-size:70%; }</style>

【讨论】：

您没有在 OP 中说明您在输入“下方”有空格。您说“我需要它始终显示在输入下方”。您的答案将适用于一种特定的屏幕尺寸。 Datepicker 仍然使用碰撞检测，如果屏幕足够小，它会翻转它。
我没有澄清它，因为我不知道问题出在空间上。没错，这就是为什么我检查了你的答案，但我添加了另一个答案，以便其他人在更改代码之前检查他们的空间。