Как изменить положение всплывающего окна Bootstrap datepicker? - PullRequest
Новая
       47

Как изменить положение всплывающего окна Bootstrap datepicker?

0 голосов
/ 09 октября 2019

Я использую загрузчик даты (https://bootstrap -datepicker.readthedocs.io / en / latest / options.html ), и все работает нормально, за исключением того, что всплывающее окно выбора даты появляется сверху вместониз. Я проверил несколько ответов, и ни один из них не помог.

Вот мой HTML: 

<div class="input-group date" data-provide="datepicker">
  <input id="dateAssigned" name="dateAssigned" type="text" class="form-control mb-4 mt-1" placeholder="mm/dd/yyyy">
  <div class="input-group-addon"></div>
</div>

А вот JS. Я пытался с WidgetPosition: 

    <script>
        $('#dateAssigned').datepicker({
            widgetPositioning: {
                horizontal: 'left',
                vertical: 'bottom'
            }
        });
    </script>

И также с ориентацией, как в этой теме ( Bootstrap DatePicker Position ), но также не работал: 

    <script>
        $('#dateAssigned').datepicker({
            orientation: "bottom"
        });
    </script>

Любойнамеки на то, как сделать так, чтобы щенок появлялся снизу? Спасибо.

Ответы [ 2 ]

0 голосов
/ 09 октября 2019

Было бы замечательно, если бы вы могли поделиться всем HTML-кодом или хотя бы всем промежуточным и. Таким образом, мы можем проверить, какие скрипты и стили вы загружаете.

Я на 99% уверен, что вы неправильно загрузили Bootstrap CSS для datepicker.

Вы можете получить его прямо здесь из Gitрепозиторий: https://github.com/uxsolutions/bootstrap-datepicker] 1

или из CDN: https://cdnjs.com/libraries/bootstrap-datepicker

0 голосов
/ 09 октября 2019

Bootstrap DatePicker по умолчанию внизу;вам не нужны никакие дополнительные правила, чтобы показать это там. orientation - это действительно способ настроить место появления всплывающего окна, хотя, скорее всего, это проблема неправильной загрузки / ссылки на DatePicker и его обязательных компонентов.

Убедитесь, что вы загружаете JavaScript для jQuery,Поппер, Bootstrap, затем DatePicker Bootstrap в этом порядке. Убедитесь, что вы загрузили CSS для Bootstrap, а затем DatePicker Bootstrap в этом порядке.

Вот пример, показывающий, что: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>

<div class="input-group date" data-provide="datepicker">
  <input id="dateAssigned" name="dateAssigned" type="text" class="form-control mb-4 mt-1" placeholder="mm/dd/yyyy">
  <div class="input-group-addon"></div>
</div>
...