thymeleaf编写date类型时间选择器
Thymeleaf没有内置的日期时间选择器，但可以使用第三方JavaScript库来实现。以下是使用Bootstrap Datepicker库的示例：
- 在HTML文件中引入Bootstrap Datepicker库的CSS和JS文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha256-8CIk6U1Z6+LZ6U9Z6U0lRtRf7tOYIYdKjyB0xQr3q3o=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha256-5dX9XK6UoVn+K+bW8nVzUfZxjKZ1UcZJ8mZ6A9+4g4s=" crossorigin="anonymous"></script>
- 在日期输入框中添加date类型和data-provide属性，并使用Thymeleaf表达式设置默认值：
<input type="date" class="form-control" data-provide="datepicker" th:value="${#dates.format(date, 'yyyy-MM-dd')}" />
- 在JavaScript中初始化日期选择器：
$(function () {
$('[data-provide="datepicker"]').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true
});
});
完整示例代码：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Datepicker Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha256-8CIk6U1Z6+LZ6U9Z6U0lRtRf7tOYIYdKjyB0xQr3q3o=" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" id="date" data-provide="datepicker" th:value="${#dates.format(date, 'yyyy-MM-dd')}" />
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha256-5dX9XK6UoVn+K+bW8nVzUfZxjKZ1UcZJ8mZ6A9+4g4s=" crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-provide="datepicker"]').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true
});
});
</script>
</body>
</html>
``
原文地址: https://www.cveoy.top/t/topic/ciPC 著作权归作者所有。请勿转载和采集!