如何在輸入字段頂部打開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-option指定選擇器的根，即： container: '#my-root' 。 您可以將該根元素放在任何地方。 然后，您可以使用CSS定位選擇器。 例如#my-root .picker__holder { bottom:0; } #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">