Javascript 如何添加日期和时间选择器引导插件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34374170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add date and time picker bootstrap plugin?
提问by Rahul Prajapati
From http://www.w3schools.com/bootstrap/bootstrap_modal.asp:
从http://www.w3schools.com/bootstrap/bootstrap_modal.asp：
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How can I add a date and time picker on this popup block?
如何在此弹出块上添加日期和时间选择器？
回答by Rahul Prajapati
<div class="input-append date form_datetime">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii"
});
</script>
Here is the demo http://www.malot.fr/bootstrap-datetimepicker/demo.php
这是演示http://www.malot.fr/bootstrap-datetimepicker/demo.php
- Above link throw download demo zip
- Extract zip file
- check demo in Extracted zip
- use in your web
- remove unnecessary jQuery / CSS / Javascript which conflict with your web CSS / Javascript / jQuery
- 上面的链接抛出下载演示 zip
- 解压压缩文件
- 检查提取的 zip 中的演示
- 在您的网络中使用
- 删除与您的网页 CSS / Javascript / jQuery 冲突的不必要的 jQuery / CSS / Javascript
回答by LOTUSMS
In the body of the modal add the html for the input field and calendar icon like this:
在模态的正文中，为输入字段和日历图标添加 html，如下所示：
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
In your main.js file, master page, or even at page level, make the javascript call like this:
在您的 main.js 文件、母版页，甚至在页面级别，像这样进行 javascript 调用：
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d'
})
there are obviously other options to control your functionality and display including ranges. Read through the documentation to explore more options bootstrap-datepicker
显然还有其他选项可以控制您的功能和显示，包括范围。通读文档以探索更多选项bootstrap-datepicker
And be sure you have JQuery.js, Bootstrap.js, and bootstrap-datepicker.js in that order being referenced in your page's head or bottom before closing your
并确保在关闭页面之前在页面的头部或底部按顺序引用了 JQuery.js、Bootstrap.js 和 bootstrap-datepicker.js
Here is a demo.
这是一个演示。
