如何在Tempus Dominus bootstrap 4 datetime选择器中设置最小日期

基础概念

Tempus Dominus 是一个基于 Bootstrap 4 的日期时间选择器插件。它提供了丰富的配置选项，使开发者能够自定义日期时间选择器的行为和外观。

设置最小日期

在 Tempus Dominus 中设置最小日期可以通过配置 min 选项来实现。这个选项允许你指定一个日期时间对象，作为选择器的最小可选值。

示例代码

以下是一个示例代码，展示如何在 Tempus Dominus 中设置最小日期：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tempus Dominus Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tempusdominus-bootstrap-4@5.39.0/build/css/tempusdominus-bootstrap-4.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="datetimepicker">Select Date and Time:</label>
                    <div class="input-group date" id="datetimepicker" data-target-input="nearest">
                        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker" />
                        <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tempusdominus-bootstrap-4@5.39.0/build/js/tempusdominus-bootstrap-4.min.js"></script>
    <script>
        $(function () {
            $('#datetimepicker').datetimepicker({
                min: new Date() // 设置最小日期为当前日期
            });
        });
    </script>
</body>
</html>

解释

HTML 结构：创建一个包含日期时间选择器的表单组。
CSS 引入：引入 Bootstrap 和 Tempus Dominus 的 CSS 文件。
JavaScript 引入：引入 jQuery、Popper.js、Bootstrap、Moment.js 和 Tempus Dominus 的 JavaScript 文件。
初始化日期时间选择器：在文档加载完成后，使用 jQuery 初始化日期时间选择器，并通过 min 选项设置最小日期为当前日期。