Bootstrap DatePicker Position - PullRequest
       11

Bootstrap DatePicker Position

0 голосов
/ 31 августа 2018

Как я могу изменить положение всплывающего календаря. Я использую приведенный ниже код, и календарь появляется в крайнем левом углу.

Current result

Мне нужно, чтобы оно всплыло над полем ввода.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <!-- jQuery -->
    <script src="../datepicker/jquery-3.1.1.min.js" type='text/javascript'> 
    </script>
    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" type="text/css">
    <link href='../datepicker/bootstrap/css' rel='stylesheet' 
    type='text/css'>
    <script src=../datepicker/bootstrap/js/bootstrap.min.js 
    type='text/javascript'></script>
    <!-- Datepicker -->
    <link href='../datepicker/bootstrap-datepicker/dist/css/bootstrap- 
    datepicker.min.css' rel='stylesheet' type='text/css'>
    <script src='../datepicker/bootstrap-datepicker/dist/js/bootstrap- 
    datepicker.min.js' type='text/javascript'></script>
</head>
<body>
<div class="container">
    <div align="center">
    <h4>Date Range for Chart</h4>
<form method="post" action="mychart2.php">
<p>Start Date: <input type="text" name = "start" data-provide="datepicker" 
data-date-format="yyyy-mm-dd"></p>
<p>End Date:   <input type="text" name = "end"   data-provide="datepicker" 
data-date-format="yyyy-mm-dd"></p>
<br>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>

Я не уверен, что могу контролировать позицию с помощью data-предоставляет

1 Ответ

0 голосов
/ 31 августа 2018

Во-первых, убедитесь, что вы используете Bootstrap CSS. Похоже, что Bootstrap загружен неправильно.

Вы можете установить свойство HTML data-date-orientation в соответствии с документацией :

Строка, разделенная пробелами, состоящая из одного или двух из «left» или «right», «top» или «bottom» и «auto» (может быть опущено); например, «верхний левый», «нижний» (горизонтальная ориентация по умолчанию будет «авто»), «правый» (вертикальная ориентация будет по умолчанию «авто»), «автоматический верх». Позволяет фиксированное размещение всплывающего окна выбора.

Каждый атрибут option должен иметь префикс data-date-.

Расстояние до поля ввода может контролироваться установкой поля.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...