Thymeleaf 使用 Bootstrap Datepicker 实现日期时间选择器

Thymeleaf 没有内置的日期时间选择器，但可以使用第三方 JavaScript 库来实现。以下是使用 Bootstrap Datepicker 库的示例：

1. 在 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>

2. 在日期输入框中添加 date 类型和 data-provide 属性，并使用 Thymeleaf 表达式设置默认值：

<input type="date" class="form-control" data-provide="datepicker" th:value="${#dates.format(date, 'yyyy-MM-dd')}" />

3. 在 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>

Thymeleaf 使用 Bootstrap Datepicker 实现日期时间选择器