如何突出显示使用 PHP 从 MySQL 数据库中获取的 Jquery datepicker 日期？答案

【问题标题】：How to highlight Jquery datepicker dates fetched from MySQL database using PHP?如何突出显示使用 PHP 从 MySQL 数据库中获取的 Jquery datepicker 日期？
【发布时间】：2021-09-13 01:01:28
【问题描述】：

我有一个 MySQL 表，其中插入了用户的可用日期。现在我要做的是获取那些“日期”并在 JQuery 日期选择器日历上突出显示它们。

这是我的代码。

// HTML
<div id="datetimepicker1"></div>


// Adapter-fetch.php

$global_user_id = 5;

$find_query = $db->prepare("SELECT date_available FROM user_dates WHERE user_id = :user_id");
$find_query->bindParam(':user_id', $global_user_id);
$find_query->execute();
$result_find = $find_query->fetchAll(PDO::FETCH_ASSOC);
if(count($result_find) > 0) {
 foreach($result_find as $row) {
  $date_available = $row['date_available'];

  echo $date_available;
 }
} else {
  echo 'No dates available';
}



// JAVASCRIPT
<script>
$(document).ready(function () {

  $.post('<?php echo $project_name; ?>/snippets/adapter-fetch.php', {},
    function(data) {

     alert(data);
  
     var SelectedDates = {};
     SelectedDates[new Date('2021/6/6')] = new Date('2021/6/6').toString();

     $('#datetimepicker1').datepicker({
     dateFormat: "yy-mm-dd",
     multidate: true,
     beforeShowDay: function(date) {
      var Highlight = SelectedDates[date];
      if (Highlight) {
        return [true, "Highlighted", Highlight];
      } else {
        return [true, '', ''];
      }
     }
    });
   });
 });
</script>

// MYSQL user_dates Table
2021-06-02
2021-06-03
2021-06-01

所以上面的代码按原样工作。现在我想要做的是将当前的“SelectedDates”替换为我使用“adapter-fetch.php”获取的那些。当我提醒“数据”时，它会返回类似“2021-06-022021-06-032021-06-01”的日期结果。所以我想知道如何修改这些数据以替换“SelectedDates”中的当前日期并使其工作？

【问题讨论】：

试试console.log(data) 显示什么？
显示相同的数据格式“2021-06-022021-06-032021-06-01”。
真的，不用逗号分隔吗？完全没有分隔符？
回应有点令人惊讶。您会期望某种 json 编码结构
正确。没有逗号分隔或分隔符。它完全按照我写的那样显示。

标签： php jquery ajax datepicker

【解决方案1】：

我已将您的 $.post 更改为 $ajax，因为我想将 dataType 属性设置为 JSON，因为这就是我们将在回调中使用的内容。编辑您的 php 以返回 JSON

<?php
    // Adapter-fetch.php
    $global_user_id = 5;
    $find_query = $db->prepare("SELECT date_available FROM user_dates WHERE user_id = :user_id");
    $find_query->bindParam(':user_id', $global_user_id);
    $find_query->execute();
    $result_find = $find_query->fetchAll(PDO::FETCH_ASSOC);
     $dates = []; // init the array
    if(count($result_find) > 0) {
     foreach($result_find as $row) $dates[]=$row['date_available'];
    }
    echo json_encode($dates);

?>

如下更新您的代码

$(document).ready(function() {
  $.ajax({
    type: "POST",
    url: '<?php echo $project_name; ?>/snippets/adapter-fetch.php',
    data: {},
    dataType: 'json',
    success: function(highlighted) {
      $('#datetimepicker1').datepicker({
        dateFormat: "yy-mm-dd",
        multidate: true,
        beforeShowDay: function(date) {
          for(let x=0;x<highlighted.length;x++) {
            //console.log(highlighted[x],date)
            let h = highlighted[x], td = date.toISOString().split("T")[0]
            if (h === td) {
              return [true, 'Highlighted', '']; // that 3rd index is the tooltip text
            }
          }
          return [true, '']; // default if not a highlight
        }
      });
    }
  });
});

【讨论】：

哇，这是一个很棒的解决方案。就一件事。日期选择器日历现在未显示。你能说出为什么会这样吗？
当您检查网络选项卡时，您是否看到带有日期的响应？它们是不同的格式吗？
抱歉，我对“网络”标签不太熟悉。但我看到“console.log(getDatesFromResponse('2021-06-022021-06-032021-06-01'));”的控制台日志。但是我没有看到“console.log(highlighted)”的日志。
在“网络”选项卡和 adapter-fetch.php 下，响应显示日期为“2021-06-022021-06-032021-06-01”。哪个是正确的，因为它们尚未被您的 javascript 代码修改，是吗？
好的。更新的答案。让我知道结果如何

【解决方案2】：

这是我最初问题的答案。此 ajax 代码将从 mysql 数据库中获取日期并在日历上突出显示它们。

<script>
$(document).ready(function() {

function formattedDate(d = new Date) {
  let month = String(d.getMonth() + 1);
  let day = String(d.getDate());
  const year = String(d.getFullYear());

  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;

  return `${year}-${month}-${day}`;
}

$.ajax({
  type: "POST",
  url: '<?php echo $project_name; ?>/snippets/adapter-fetch.php',
  data: {},
  dataType: 'json',
  success: function(highlighted) {
    $('#datetimepicker1').datepicker({
      dateFormat: "yy-mm-dd",
      multidate: true,
      beforeShowDay: function(date) {

        newDate = formattedDate(date);
        for(let x=0; x < highlighted.length; x++) {
        console.log(highlighted[x].toString(), newDate.toString());

        if (highlighted[x] === newDate) {
          return [true, 'Highlighted', ''];
        }
      }
      return [true, '']; // default if not a highlight
     }
    });
   }
  });
});
</script>

【讨论】：