bootstrap日期格式校验
时间: 2023-07-08 17:46:49 浏览: 158
Bootstrap 可以使用 `bootstrap-datepicker` 插件来进行日期格式校验。具体步骤如下:
1. 引入 bootstrap 和 bootstrap-datepicker 的 CSS 和 JS 文件。
```html
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
```
2. 在 HTML 中添加日期选择器,并设置日期格式和校验规则。
```html
<input type="text" id="datepicker" data-provide="datepicker" data-date-format="yyyy-mm-dd" required>
```
在这个示例中,我们使用了 `data-provide` 和 `data-date-format` 属性来设置日期选择器和日期格式。同时,我们还添加了 `required` 属性来设置日期为必填项。
3. 使用 JavaScript 初始化日期选择器,并添加校验规则。
```javascript
$(document).ready(function() {
$('#datepicker').datepicker({
format: 'yyyy-mm-dd',
startDate: '-3d',
endDate: '+3d',
autoclose: true,
todayHighlight: true
});
});
```
在这个示例中,我们使用了 `datepicker()` 方法来初始化日期选择器,并添加了一些校验规则,如 `startDate` 和 `endDate` 来限制可选日期的范围,`autoclose` 来自动关闭日期选择器,`todayHighlight` 来设置今天日期高亮显示。
这样就可以使用 bootstrap-datepicker 插件来进行日期格式校验了。
阅读全文