当前位置：首页 > 文章列表 > 文章 > php教程 > jQueryDatepicker禁用数据库日期设置方法

jQueryDatepicker禁用数据库日期设置方法

2025-08-03 22:48:35 0浏览收藏

想要利用 jQuery Datepicker 屏蔽数据库中已预订的日期，防止重复预订？本文详细讲解了如何通过 PHP 后端从数据库获取预订日期，并将其转化为 JavaScript 可用的 JSON 格式。前端 JavaScript 代码则利用 jQuery UI Datepicker 组件的 `beforeShowDay` 回调函数，动态禁用已预订日期。教程涵盖了 PHP 数据准备、JavaScript 代码实现、以及完整示例，助你轻松实现高效、易维护的日期屏蔽功能，提升用户体验，避免预订冲突。文章还包含注意事项，例如 `minDate` 和 `maxDate` 选项的使用，以及 jQuery UI 和 Datepicker 插件的正确引入，确保功能稳定运行。

使用 jQuery UI Datepicker 屏蔽数据库中的日期

本文将指导你如何使用 jQuery UI Datepicker 组件，结合 PHP 从数据库中获取已预定的日期，并在 Datepicker 中屏蔽这些日期，防止用户选择已被占用的日期。通过优化 PHP 数据格式和 JavaScript 代码，实现高效且易于维护的日期屏蔽功能。

从数据库加载并屏蔽日期

本教程将展示如何从数据库加载已预定的日期，并在 jQuery UI Datepicker 中禁用这些日期，从而防止用户重复预订。我们将分为 PHP 后端数据准备和 JavaScript 前端日期屏蔽两个部分进行讲解。

PHP 后端：准备日期数据

首先，我们需要修改 PHP 脚本，使其返回一个包含已预定日期的简单数组。这样可以简化 JavaScript 的处理过程。

<?php
$data = array();

$query = "SELECT * FROM events ORDER BY id";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

foreach($result as $row) {
    $data[] = date("d-m-Y", strtotime($row["start_event"]));
}

echo json_encode($data);
?>

这段代码从 events 表中查询所有事件，并提取 start_event 字段的日期部分。然后，使用 date("d-m-Y", strtotime($row["start_event"])) 将日期格式化为 dd-mm-yyyy 格式，并将这些日期添加到一个数组中。最后，使用 json_encode() 函数将数组编码为 JSON 格式，以便 JavaScript 可以轻松解析。

注意： 确保 $connect 对象已经正确连接到数据库。

JavaScript 前端：使用 Datepicker 屏蔽日期

接下来，我们将修改 JavaScript 代码，使其在初始化 Datepicker 时，从 load_days.php 获取日期数据，并在 beforeShowDay 回调函数中使用这些数据来禁用日期。

$(function() {
    $.ajax({
        url: "load_days.php",
        type: "POST",
        success: function (dates) {
            $("#datepicker").datepicker({
                minDate: 2,
                maxDate: "1w",
                beforeShowDay: function(date) {
                    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
                    return [dates.indexOf(string) === -1];
                }
            });
        },
        dataType: "json"
    });
});

这段代码使用 $.ajax() 函数从 load_days.php 获取日期数据。在 success 回调函数中，我们初始化 Datepicker 组件。beforeShowDay 回调函数会在 Datepicker 显示每一天之前被调用。在这个函数中，我们将日期格式化为 dd-mm-yyyy 格式，并使用 dates.indexOf(string) 检查该日期是否在已预订日期数组中。如果该日期不在数组中（返回 -1），则返回 [true]，表示该日期可以被选择；否则，返回 [false]，表示该日期被禁用。

注意事项：

minDate 和 maxDate 选项可以用来限制 Datepicker 的可选日期范围。
dataType: "json" 告诉 jQuery 将响应数据解析为 JSON 格式。
确保 jQuery UI 和 Datepicker 插件已经正确引入到页面中。

完整示例

将上述 PHP 代码保存为 load_days.php，并将上述 JavaScript 代码嵌入到 HTML 页面中，确保 jQuery UI 和 Datepicker 插件已正确引入。

<!DOCTYPE html>
<html>
<head>
    <title>Datepicker Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function() {
            $.ajax({
                url: "load_days.php",
                type: "POST",
                success: function (dates) {
                    $("#datepicker").datepicker({
                        minDate: 2,
                        maxDate: "1w",
                        beforeShowDay: function(date) {
                            var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
                            return [dates.indexOf(string) === -1];
                        }
                    });
                },
                dataType: "json"
            });
        });
    </script>
</head>
<body>
    <p>Date: &lt;input type=&quot;text&quot; id=&quot;datepicker&quot;&gt;</p>
</body>
</html>

通过以上步骤，你就可以成功地从数据库加载已预订的日期，并在 jQuery UI Datepicker 中禁用它们，从而避免重复预订。

终于介绍完啦！小伙伴们，这篇关于《jQueryDatepicker禁用数据库日期设置方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！