bootstrap与html中输入日期时间的输入框
时间: 2024-02-06 20:09:44 浏览: 236
日期输入框演示(html代码)
5星 · 资源好评率100%
Bootstrap提供了一个datetime picker插件,可以用来在HTML中创建日期时间输入框。使用该插件需要先引入相关的CSS和JS文件,然后在HTML中添加相应的代码。以下是一个简单的示例:
1. 引入CSS和JS文件
```html
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
```
2. 创建日期时间输入框
```html
<div class="form-group">
<label for="datetimepicker">Date/Time:</label>
<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>
</div>
```
3. 初始化datetime picker插件
```javascript
$('#datetimepicker').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
useCurrent: false
});
```
其中,`format`参数用于指定日期时间的格式,`useCurrent`参数用于控制是否默认选中当前日期时间。你可以根据自己的需求进行调整。
阅读全文