Bootstrap DatePicker Position

问题

How can I change position of where the calendar pops up. I am using the below code and the calendar pops up to the far left.

I need it to pop up over the input field.

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

I not sure I can control the position by using data-provide

回答1:

First, make sure that you use the Bootstrap CSS. It seems that the Bootstrap is not loaded properly.

You can set the HTML property data-date-orientation according to the documentation:

A space-separated string consisting of one or two of “left” or “right”, “top” or “bottom”, and “auto” (may be omitted); for example, “top left”, “bottom” (horizontal orientation will default to “auto”), “right” (vertical orientation will default to “auto”), “auto top”. Allows for fixed placement of the picker popup.

Each option attribute has to have the data-date- prefix.

The distance to the input field may be controller by setting the margin.

来源：https://stackoverflow.com/questions/52116552/bootstrap-datepicker-position

标签

html

css

datepicker