一, 控件下载
1, 控件使用所需 (CSS 和 JS):
Bootstrap.min.CSS
Bootstrap-datetimepicker.min.CSS
jQuery.min.JS
Bootstrap.min.JS
- Bootstrap-datetimepicker.min.JS
- Bootstrap-datetimepicker.zh-CN.JS
下载链接: https://pan.baidu.com/s/1zKgB8dHYsbYh4L6cKvPcKQ
提取码: 7n4c
二, 示例
要在 head 标签中引入所需的 CSS 和 JS.
1, 页面部分:
- <div class="input-group date form_datetime"id='datetimepicker1'style="float: left; width: 40%; margin-left: 5%;">
- <span class="input-group-addon">
- <span style="color: #337ab7;">
- <b>
计划起始时间
- </b>
- </span>
- </span>
- <input type="text" class="form-control" placeholder=""id="xmjhqssj" />
- <span class="input-group-addon">
- <span class="glyphicon glyphicon-calendar"></span>
- </span>
- </div>
如下图:
在 div 的 class 中要添加 date, 设置的 id 要在 JS 中使用.
2,JS 部分:
- <script type="text/javascript">
- $(document).ready(function() {
- $('#datetimepicker1').datetimepicker({
- format : 'yyyy-mm-dd',
- language: 'zh-CN',
- minView: "month",// 设置只显示到月份
- autoclose: true,
- todayBtn: "linked"
- });
- });
- </script>
使用 $('#datetimepicker1').datetimepicker({}); 弹出时日期选择控件.
其中:
format: 日期格式
language: 语言格式
minView: 控件显示到哪一级 (month 就是选择到日期, 不显示几点几分)
autoclose: 设置为 true 时, 选择完日期就自动关闭
todayBtn: 默认当前时间
三, 问题解决
1, 有时弹出的日期控件会出现如下情况:
此时需要在引入的 Bootstrap-datetimepicker.min.CSS 文件中进行修改:
设置 width 和 height 限制宽高, 并将纵向滚动条隐藏, 最终效果如下:
来源: http://www.bubuko.com/infodetail-3408650.html