Как отобразить bootstrap-datepicker в пользовательском контейнере?

Я пытаюсь отобразить bootstrap-datepicker в контейнере после того, как пользователь нажмет на пользовательский элемент управления (div). Поля ввода скрыты. Вот что у меня получилось: http://jsfiddle.net/bczjxv8x/1/

Я инициализирую datepicker для использования пользовательского контейнера:

$('#datepicker').datepicker({
    container: '.container'
});

И затем при нажатии я открываю средство выбора даты:

$('.button').on('click', function() {
    $('#datepicker').datepicker('show');
});

Проблема в том, что всплывающее окно datepicker с рассчитанными свойствами left и top находится не в том месте. Мне нужно, чтобы средство выбора даты появлялось прямо над контейнером. Если я использую «.containter» для инициализации средства выбора даты, оно запускается во встроенном режиме.


bootstrap-datepicker
person joshas    schedule 29.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У меня была такая же проблема с использованием начальной загрузки 4. Вам нужно создать такой контейнер:

    <div class="input-group date">
    <input type="text" class="form-control" value="12-02-2012">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>

Важно использовать класс "input-group", взгляните на документ

Мне также пришлось поставить '.input-group' в опцию контейнера

Я пробовал это с другими классами и идентификаторами, но это не сработало. Это было единственное рабочее решение

Также ознакомьтесь с этим руководством.

person Alfredo cubitos    schedule 01.09.2018