正文

学会用jQuery日历插件轻松设置默认选中日期范围

/0 浏览量
0401

在网页设计中，日期选择器是一个常见的组件，它可以帮助用户轻松选择日期。jQuery 提供了许多优秀的日历插件，其中之一就是 bootstrap-datepicker。这个插件不仅易于使用，而且功能强大，允许你轻松设置默认选中的日期范围。

简介

bootstrap-datepicker 是一个基于 Bootstrap 的日期选择器插件，它支持多种配置选项，包括设置默认选中的日期范围。通过使用这个插件，你可以为你的网页添加一个功能丰富的日期选择器，让用户能够轻松选择所需的日期。

安装

首先，你需要确保你的项目中已经包含了 Bootstrap 和 jQuery。你可以从 Bootstrap 官网下载 Bootstrap 文件，并确保 jQuery 库在你的项目中可用。

<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 引入 Bootstrap JS 和日历插件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap-datepicker.min.js"></script>

设置默认选中日期范围

要设置默认选中的日期范围，你需要使用 bootstrap-datepicker 的 setDates 方法。以下是一个简单的例子，展示了如何设置默认选中的日期范围：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期选择器示例</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <div class="form-group">
            <label for="startDate">开始日期</label>
            <input type="text" class="form-control" id="startDate" placeholder="选择开始日期">
        </div>
        <div class="form-group">
            <label for="endDate">结束日期</label>
            <input type="text" class="form-control" id="endDate" placeholder="选择结束日期">
        </div>
    </div>

    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 引入 Bootstrap JS 和日历插件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap-datepicker.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#startDate').datepicker({
                autoclose: true,
                todayHighlight: true
            });

            $('#endDate').datepicker({
                autoclose: true,
                todayHighlight: true
            });

            // 设置默认选中的日期范围
            $('#startDate').datepicker('setDates', [new Date(2021, 0, 1)]);
            $('#endDate').datepicker('setDates', [new Date(2021, 0, 31)]);
        });
    </script>
</body>
</html>

在这个例子中，我们为开始日期和结束日期分别创建了一个输入框，并使用 bootstrap-datepicker 插件初始化它们。然后，我们使用 setDates 方法设置了默认的日期范围。

总结

通过使用 bootstrap-datepicker 插件，你可以轻松地为你的网页添加一个功能丰富的日期选择器，并设置默认选中的日期范围。这个插件易于使用，并且提供了许多配置选项，让你可以根据需要定制日期选择器的行为。

-- 展开阅读全文 --