强制在输入下打开Jquery-UI Datepicker? [英] Force Jquery-UI Datepicker to open under the Input?

问题描述

我正在将Datepicker与Jquery-Ui配合使用，我需要它始终显示在输入下方.

I´m using a Datepicker with Jquery-Ui and I need it to always display under the input.

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

I checked the API documentation, googled it and searched for it on Stackoverflow, but I could not find a solution: I tried these codes:

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

__

orientation: "bottom",

任何人都知道如何执行此操作吗?

Anyone has an idea how to do this?

推荐答案

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

Can do this with an inline datepicker.

工作示例: 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/

You can place the datepicker largely anyplace and then use .position() to place it under the input field. It will, by default, try to flip if it detects collision. You can turn this off. See more: http://api.jqueryui.com/position/

需要管理一些额外的工作，但是它可以为您提供所需的控制权.

It's a little extra work to manage, but it give you the control you're looking for.

这篇关于强制在输入下打开Jquery-UI Datepicker?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！