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 来创建一个日期控件，以便用户可以方便地选择日期。
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
