javascript - 引导日期选择器位置
问题描述
我正在为日期选择器使用以下示例代码
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<!-- Form code begins -->
<form method="post">
<div class="form-group"> <!-- Date input 1-->
<label class="control-label" for="date">Start Date</label>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Date input 2-->
<label class="control-label" for="date">End Date</label>
<input class="form-control" id="date1" name="date1" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Submit button -->
<button class="btn btn-primary " name="submit" type="submit">Submit</button>
</div>
</form>
<!-- Form code ends -->
</div>
</div>
</div>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var date_input1=$('input[name="date1"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
date_input1.datepicker(options);
})
</script>
</div>
</body>
</html>
日期选择器Start Date
在正确位置打开,但End Date
日期选择器在字段上方打开。我想在下面打开它,类似于第一种情况。我想问题出在javascript上,而javascript对我来说是新事物。我该如何纠正错误?
解决方案
在编程中使用任何新东西时,最好查阅相关工具的文档,以了解您能做什么和不能做什么。在这种情况下,我对 bootstrap-datepicker 进行了谷歌搜索,并在这里找到了文档:Options Doc
阅读文档后,您会发现可以设置一个名为方向的属性。将您的 options 变量修改为以下内容应该可以解决您的问题:
var options={
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'bottom'
};
让我知道这是怎么回事!
推荐阅读
- linux - Ansible - winrm 或 requests 未安装
- javascript - 如何从 onChange() 事件中获取道具?
- flutter - 如何使用 StreamBuilder 检查我们是否在 ListView 的末尾
- android - Unity Google Play Console Warning optimize APK
- python - 计算字符串子列表中的元素
- laravel - 如何在 laravel 模型中为急切加载添加约束
- python - 根据另一个数据框中的信息为数据框中的行子集分配一个值(在一列中)
- xml - XSLT 代码获取最后一个元素的属性值
- json - 过滤并推入数组后如何访问JSON文件
- autohotkey - FileCreateShortcut 行为怪异