Thymeleaf 日期和时间选择器：使用 HTML5 输入框
Thymeleaf 可以使用 HTML5 提供的日期和时间输入框来创建日期和时间选择器。以下是一个示例：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Date Picker Example</title>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/5.0.2/css/bootstrap.min.css}">
</head>
<body>
<div class="container">
<h1>Date Picker Example</h1>
<form th:action="@{/submit}" method="post">
<div class="form-group">
<label for="dateField">Date:</label>
<input type="date" class="form-control" id="dateField" name="date"/>
</div>
<div class="form-group">
<label for="timeField">Time:</label>
<input type="time" class="form-control" id="timeField" name="time"/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/5.0.2/js/bootstrap.min.js}"></script>
</body>
</html>
在这个例子中，我们使用了 Bootstrap 样式来美化表单。我们在表单中添加了两个输入框，一个用于日期选择，另一个用于时间选择。这两个输入框都有一个 'name' 属性，用于在提交表单时获取值。
在服务端，我们可以使用 Spring MVC 或其他框架来处理表单提交。以下是一个 Spring MVC 的示例：
@Controller
public class MyController {
@PostMapping("/submit")
public String handleSubmit(@RequestParam("date") LocalDate date,
@RequestParam("time") LocalTime time) {
// 处理表单提交
return "result";
}
}
在这个例子中，我们使用了 @RequestParam 注解来获取日期和时间的值。Spring MVC 会自动将字符串转换为 LocalDate 和 LocalTime 类型的对象。我们可以在方法中处理这些值，然后返回一个结果页面。
以上是一个简单的 Thymeleaf 编写日期和时间选择器的例子。你可以根据自己的需求修改代码，并添加其他功能。
原文地址: https://www.cveoy.top/t/topic/nsTP 著作权归作者所有。请勿转载和采集!