Как открыть календарь pickadate.js в верхней части поля ввода - PullRequest
Новая
       22

Как открыть календарь pickadate.js в верхней части поля ввода

0 голосов
/ 05 июля 2018

У меня проблема с каландром пикадата. Я обнаружил проблему в pickadate в конце страницы, пожалуйста, пройдите вложение. Я должен открыть календарь pickadate в верхней части поля ввода, а поле ввода в конце браузера.

enter image description here

Я пробовал ниже код: 

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

1 Ответ

0 голосов
/ 09 июля 2018

Укажите корень для сборщика с помощью параметра контейнера, т. Е. 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">
...