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

Question

我的磷酸钙压延机有问题。我在页面末尾的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">