bootstrap 时间选择框
时间: 2023-11-17 08:05:51 浏览: 76
Bootstrap 时间选择框可以使用 Bootstrap 的 datetimepicker 插件来实现。下面是一个使用示例:
1. 首先下载 datetimepicker 插件的代码,可以从这里下载:https://github.com/Eonasdan/bootstrap-datetimepicker/releases
2. 在 HTML 页面中引入必要的 CSS 和 JS 文件:
```
<link href="path/to/bootstrap.min.css" rel="stylesheet">
<link href="path/to/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/moment.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/bootstrap-datetimepicker.min.js"></script>
```
3. 在页面中添加一个时间选择框:
```
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
```
4. 在 JavaScript 中初始化 datetimepicker 插件:
```
$('#datetimepicker').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
```
其中,format 属性指定时间的格式,可以根据需要自行修改。
以上就是使用 Bootstrap datetimepicker 插件实现时间选择框的方法。
阅读全文