引导日期选择器位置答案

【问题标题】：Bootstrap DatePicker Position引导日期选择器位置
【发布时间】：2018-08-31 13:30:00
【问题描述】：

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

我需要它在输入字段上弹出。

<!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-provide 控制位置

【问题讨论】：

尝试将 css 直接定位在元素上以根据您的喜好定位它。查看magin 和Z-index。
您的date-picker popup 分享屏幕截图如何
为什么会有-1？？？？这是什么意思？
@gary_1946 这意味着您收到了反对票。您收到它的原因有多种。喜欢：问题不遵循“如何提问”（meta.stackexchange.com/questions/80538/…）
好吧，我不确定我是否同意。我今年 72 岁，从事编程工作 30 多年。现在，我确实不是为了谋生而做这件事，但我确实知道我在做什么。我认为论坛是获得帮助的好地方，而不是批评寻求帮助的人的地方。我认为建设性的批评是矛盾的。只是我的意见。

标签： html css datepicker

【解决方案1】：

首先，确保使用 Bootstrap CSS。 Bootstrap 似乎没有正确加载。

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

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

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

到输入字段的距离可以通过设置边距来控制。

【讨论】：

我在研究解决方案时在文档中看到了这一点，但无法让它发挥作用。我使用了 data-date-orientation="top right" 仍然弹出左下角
@gary_1946 你能通过编辑你的问题提供一张图片吗？
这里是屏幕截图：dropbox.com/s/q5dub2p1pblrwjl/Capture.PNG?dl=0
看来你没有使用 Bootstrap 样式。您的 JavaScript 控制台中是否出现任何错误？
我正在使用 Chrome 开发工具，没有错误。我正在使用引导 css。我还没有弄乱css，因为我想看看是否有办法定位它。