bootstraptable 日期控件_bootstrap table插件使用说明demo
时间: 2023-08-06 08:05:56 浏览: 601
Bootstrap Table 是一个基于 Bootstrap 的可扩展的表格插件,支持多种功能扩展、多种数据源以及自定义格式化等。如果要在 Bootstrap Table 中使用日期控件,可以使用 Bootstrap Datepicker 插件。
下面是一个使用 Bootstrap Table 和 Bootstrap Datepicker 的例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Table Demo</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>
<div class="container">
<table id="table"
data-toggle="table"
data-url="data.json"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="date" data-formatter="dateFormat">Date</th>
</tr>
</thead>
</table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
function dateFormat(value, row, index) {
return value ? moment(value).format('YYYY-MM-DD') : '';
}
$(document).ready(function() {
$('#table').bootstrapTable();
$('#table').on('editable-save.bs.table', function(e, field, row, oldValue, $el) {
if (field === 'date') {
row.date = moment(row.date).toISOString();
}
});
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
});
</script>
</body>
</html>
```
在这个例子中,我们首先引入了 Bootstrap、Bootstrap Table 和 Bootstrap Datepicker 的 CSS 和 JavaScript 文件。然后在 HTML 中创建一个表格,并指定了数据源、分页、搜索、刷新、切换列等选项。
表格中的日期列使用了 `data-formatter` 属性来指定自定义格式化函数 `dateFormat`,这个函数使用了 Moment.js 库来将日期格式化成 YYYY-MM-DD 的形式。
在 JavaScript 中,我们使用了 jQuery 的 `$(document).ready()` 函数来初始化 Bootstrap Table,并在表格保存编辑后将日期格式化成 ISO 8601 格式。我们还使用了 Bootstrap Datepicker 来创建一个日期控件,以便用户可以方便地选择日期。
阅读全文