Bootstrap DatePicker位置

Question

如何更改日历弹出的位置。我使用下面的代码，日历弹出到最左边。

我需要它弹出输入字段。

<!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>

我不确定我可以通过使用数据提供来控制位置

Answer 1

首先，确保使用Bootstrap CSS。看起来Bootstrap没有正确加载。

您可以根据data-date-orientation设置HTML属性documentation：

由空格分隔的字符串，由“左”或“右”，“顶部”或“底部”和“自动”中的一个或两个组成（可以省略）;例如，“左上角”，“下方”（水平方向默认为“自动”），“右方”（垂直方向默认为“自动”），“自动上方”。允许固定放置选择器弹出窗口。

每个选项属性都必须具有data-date-前缀。

通过设置余量，到输入字段的距离可以是控制器。

Bootstrap DatePicker位置

问题描述投票：-1回答：1

1个回答

最新问题

Bootstrap DatePicker位置

问题描述 投票：-1回答：1

1个回答

最新问题

问题描述投票：-1回答：1