Force Jquery-UI Datepicker to open under the Input?

问题

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

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?

回答1:

Can do this with an inline datepicker.

Working Example: 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();
  })
});

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.

回答2:

Alternative Answer to Twistys Answer.

The Jquery UI Datepicker displays the calendar under the input by default, if it doesn´t, mostly it has simply no space under the input, as it was in my case.

So just change the size of the Datepicker and it will display under the input.

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

来源：https://stackoverflow.com/questions/48130201/force-jquery-ui-datepicker-to-open-under-the-input

标签

jquery

html

jquery-ui