使用 ajax 获取但未在 Jquery UI 日期选择器中突出显示的日期，PHP

Question

我正在使用 Jquery 日期选择器来突出显示特定日期。正在从 PHP 和 MySQL 中的数据库中获取日期。将根据 select 标记中的 selected 值获取日期。日期已成功获取并显示在控制台中。

如果我直接获取脚本中的所有日期，那么它会显示突出显示的日期。但是当我使用 select 标签并通过 ajax 发送 selected 值时，它不会。

Jquery:

<script>
    $(function() {
        // An array of dates
        var eventDates = {};

        $("#select").on("change", function() {
            var truck = $(this).val();

            $.ajax({
                url: 'ajax/vehicledate.php',
                type: "POST",
                /*contentType: "application/json; charset=utf-8",*/
                data: {
                    val: truck
                },
                success: function(data) {
                    console.log(data);
                }
            });

            // datepicker
            $('#start').datepicker({

                dateFormat: "yy-mm-dd",

                beforeShowDay: function(date) {
                    var highlight = eventDates[date];
                    if (highlight) {
                        return [true, "event", 'Tooltip text'];
                    } else {
                        return [true, '', ''];
                    }
                }
            });
        });
    });
</script>

Jquery 获取所有日期

 <script>
    $(function() {
        // An array of dates
        var eventDates = {};

        <?php        

            $sql = "SELECT * from `ut_trips` WHERE `deisel` > 0";

            $result = $connect->query($sql);   

            while( $final=$result->fetch_assoc() ) 
            {

            ?>

            eventDates[new Date('<?php 
            $orgDate = date($final['date']);
            $date = str_replace('-"', '/', $orgDate);  
            $newDate = date("Y/m/d", strtotime($date));  
            echo $newDate   ?>')] = new Date(
            '<?php $orgDate =date($final['date']); 
            $date = str_replace('-"', '/', $orgDate);  
            $newDate = date("Y/m/d", strtotime($date));  
            echo $newDate  
            ?>'
            );

            <?php

            }

            ?>

            // datepicker
            $('#start').datepicker({

                dateFormat: "yy-mm-dd",

                beforeShowDay: function(date) {
                    var highlight = eventDates[date];
                    if (highlight) {
                        return [true, "event", 'Tooltip text'];
                    } else {
                        return [true, '', ''];
                    }
                }
            });
        });
    });
</script>

ajax PHP 文件

<?php

include("../partials/connect.php");

$v = $_POST['val'];

$sql = "SELECT * from `table` WHERE `value1` > 0 AND `value2` = '".$v."'";

$result = $connect->query($sql);   

while( $final=$result->fetch_assoc() ) 
{

?>

eventDates[new Date('<?php 
$orgDate = date($final['date']);
$date = str_replace('-"', '/', $orgDate);  
$newDate = date("Y/m/d", strtotime($date));  
echo $newDate   ?>')] = new Date(
'<?php $orgDate =date($final['date']); 
$date = str_replace('-"', '/', $orgDate);  
$newDate = date("Y/m/d", strtotime($date));  
echo $newDate  
?>'
);

<?php

}

?>

控制台输出

eventDates[new Date('2021/11/10')] = new Date(
'2021/11/10'
);


eventDates[new Date('2021/11/12')] = new Date(
'2021/11/12'
);


eventDates[new Date('2021/11/13')] = new Date(
'2021/11/13'
);

更新：

以 jason 格式回显日期

echo jason_encode($newDate);

Jquery

 dataType: "json",
 success: function(data) {
            console.log(data);
            return data;
 }

using dataType: "json" 在控制台中不输出任何内容，如果我将其注释掉，它将在 colsole 中输出 eventDates[new Date('2021\/11\/12')] = new Date( '2021\/11\/12' );。

Answer 1

我认为在日历已经呈现后更新显示的最佳方法是使用 the refresh method。但是如何突出显示新日期？您可以通过将新日期添加到现有的 eventDates 集，然后简单地刷新整个日历来实现这一点 - beforeShowDay 将处理新的、更新的 eventDates 集，而您的新日期将被突出显示。

有关工作示例，请参阅下面的代码段。

但首先，您的代码对 SQL 注入开放！ 首先立即修复此问题，例如 How can I prevent SQL injection in PHP? 它应该非常简单，例如也许像这样：

include("../partials/connect.php"); $sql = "SELECT * from `table` WHERE `value1` > 0 AND `value2` = ?"; $stmt = $connect->prepare($sql); $stmt->bind_param('s', $_POST['val']); $stmt->execute(); $result = $stmt->get_result(); while ($row = $result->fetch_assoc()) { // ... etc, some tips below

好的，继续 Javascript。一些注意事项和建议：

目前您正在 select 更改处理程序中初始化日期选择器。这意味着每次更改 select 时，您都会重新初始化日期选择器。你不应该那样做 - 初始化一次，独立于任何用户交互。

我不确定我是否理解您为何以这种方式构建 eventDates。至少根据您在此处显示的 code/requirements ，它作为一个简单的数组会简单得多，例如：

// An array of dates var eventDates = [ "2021/12/01", "2021/12/02", "2021/12/03", ];

我在下面的代码片段中使用了这个作为我的演示代码。

在您的 AJAX 调用中，您使用 val: selectvalue 传递一个值 - 但 selectvalue 似乎没有在任何地方定义。不过您确实已经找到了 selected 值 - truck。这就是您要发送的值。

Convention is POST 用于更改数据（例如购买，更新记录），而 GET 用于正在读取 数据。您只是加载了一些日期数据，因此这实际上应该是 GET。我建议坚持惯例并更新您的后端以响应 GET 而不是 POST.

一旦您收到来自 AJAX 电话的新日期，您需要将它们添加到 eventDates 的现有集合中。如果 eventDates 是上面建议的简单数组，那很容易（至少如果你 search SO for answers！）：eventDates.push(...newDates);.。更新根据评论中的讨论，新日期实际上应该完全取代现有日期：eventDates = newDates;

最后，刷新整个日历：$('#start').datepicker("refresh");

综上所述，这是一个工作演示：

$(function() { // An array of dates - dummy data for demo var eventDates = [ "2021/12/01", "2021/12/02", "2021/12/03", ]; // Initialise datepicker - once $('#start').datepicker({ dateFormat: "yy-mm-dd", beforeShowDay: function(date) { // date is a JS date, we want to compare it to the dates // in eventDates, so we need to format it. Datepicker has // a handy utility for formatting dates, see // https://api.jqueryui.com/datepicker/#utility-formatDate var formatted = $.datepicker.formatDate('yy/mm/dd', date); // Easy way to check if a value is in an array if (eventDates.indexOf(formatted) === -1) { return [true, '', '']; } else { return [true, "event", 'Tooltip text']; } } }); $("#select").on("change", function() { // Can't do AJAX here, but we can write the success method, and // just use a hard-coded set of results. Say your AJAX returns // a new set of dates, as an array: var data = [ "2021/12/24", "2021/12/25", "2021/12/26", ]; // To merge existing dates with new dates // eventDates.push(...data); // To show only new dates: eventDates = data; // So new eventDates is updated with the new dates, we want // to reresh the whole calendar. $('#start').datepicker("refresh"); // Done! To be clear, your AJAX success would look like this: // success: function(data) { // eventDates.push(...data); // $('#start').datepicker("refresh"); // } }); });

.event { background-color: red; }

<link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script> <input id="start" type="text"> <select id="select"> <option>Change me</option> <option value="foo">Foo</option> <option value="bar">Bar</option> </select>

至于你的 PHP，假设你已经修复了前面描述的 SQL 注入问题，你需要 return 一个 JSON 数组。我无法真正弄清楚您现有的代码在做什么 - $final['date'] 是什么格式？为了演示如何创建和 return 你的数组，我假设它实际上是一个格式正确的日期。根据需要进行调整。

// Define the empty array we will return. $eventDates = []; // Iterate over your query results ... while ($final = $result->fetch_assoc()) { // ... adding each date to the array, let's say $final['date'] is // formatted like 2021/12/25 $eventDates[] = $final['date']; } // We want to return JSON, so jQuery can read it header('Content-Type: application/json; charset=utf-8'); echo json_encode($eventDates);

使用 ajax 获取但未在 Jquery UI 日期选择器中突出显示的日期，PHP

Dates fetched using ajax but not highlighted in Jquery UI datepicker, PHP

javascript

php

mysql

jquery

jquery-ui-datepicker