Bootstrap DatePicker位置 [英] Bootstrap DatePicker Position

查看:75
本文介绍了Bootstrap DatePicker位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何更改日历弹出位置.我正在使用以下代码,日历会弹出到最左侧.

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

推荐答案

首先,请确保您使用Bootstrap CSS.引导程序似乎没有正确加载.

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

您可以根据

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

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.

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

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

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

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

这篇关于Bootstrap DatePicker位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆