如何在输入字段顶部打开pickadate.js日历

Question

我在pickadate压光机上遇到了问题。我在页面末尾的pickadate中发现了一个问题，请查看附件。我必须打开输入字段顶部的pickadate日历，而输入字段在浏览器的末尾。

​

​

我试过下面的代码：

$('#description_award').pickadate({
    format: 'yyyy-mm-dd',
    formatSubmit: 'mm/dd/yyyy',
    min: scriptDate,
    max: maxDate,
    drops: "up"
});

Answer 1

使用容器选项指定选取器的根目录，即：container: '#my-root'。您可以将该根元素放在任何位置。然后，您可以使用css来定位选取器。例如，#my-root .picker__holder { bottom:0; }会让它出现在根的上面(因为它是绝对定位的)。

​

jQuery(document).ready(function(){
  jQuery('.datepicker').pickadate({container:"#my-root"});
});

html { padding-top: 150px; /* just for stack-overflow */ }
#my-root { outline: 1px solid red; /* just a visual clue */ }
#my-root .picker__holder { bottom: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.date.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/classic.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/classic.date.css" rel="stylesheet"/>

<div id="my-root">
    <!-- datepicker will appear where this element is -->
</div>
<input class="datepicker" placeholder="clickme">

​