如何将jQuery Datepicker值存入PHP变量并与ACF字段值对比

问题根源 #

PHP是服务器端语言，在页面加载阶段执行；JS是客户端语言，运行在浏览器环境中。你当前的代码仅将日期存入JS变量，没有把数据发送到服务器，导致PHP的$_GET["reviewdate"]无法获取到值，自然输出为空。

解决方案1：表单提交（刷新页面） #

通过表单将日期数据同步提交到服务器，是最直接的实现方式：

1. 修改HTML结构，将输入框和按钮包裹在表单内：

<form method="GET" action="">
  <input name="reviewdate" type="text" id="datepick" /> 
  <button type="submit" id="searchperf">SEARCH</button>
</form>

2. 调整Datepicker日期格式，确保PHP能正确解析：

$(function () {
  $("#datepick").datepicker({
    minDate: new Date(2023, 4, 23),
    maxDate: 0,
    dateFormat: 'yy-mm-dd' // 设置为PHP易解析的标准日期格式
  });
});

3. 修正PHP代码，正确处理DateTime对象的输出：

<?php 
if(isset($_GET["reviewdate"])) { 
  $date = date_create($_GET["reviewdate"]);
  if($date) {
    // 将DateTime对象转为字符串输出
    echo '选择的日期：' . $date->format('Y-m-d');
    echo '<br>';
    var_dump($date);
  } else {
    echo '日期格式错误，无法解析';
  }
} 
?>    

解决方案2：AJAX异步提交（不刷新页面） #

如果需要无刷新交互，可通过AJAX将日期数据异步发送到服务器：

1. 添加结果显示容器，用于展示PHP返回的内容：

<input name="reviewdate" type="text" id="datepick" /> 
<button id="searchperf">SEARCH</button>
<div id="result"></div>

2. 修改JS点击事件，通过AJAX提交数据：

$(function () {
  $("#datepick").datepicker({
    minDate: new Date(2023, 4, 23),
    maxDate: 0,
    dateFormat: 'yy-mm-dd'
  });

  $('#searchperf').click(function(e) {
    e.preventDefault(); // 阻止按钮默认行为
    const perfdate = $('#datepick').val();
    
    $.ajax({
      url: '', // 可填当前页面或指定PHP文件路径
      method: 'GET',
      data: { reviewdate: perfdate },
      success: function(response) {
        $('#result').html(response); // 将PHP返回结果展示在页面上
      },
      error: function() {
        $('#result').html('请求失败，请重试');
      }
    });
  });
});

3. PHP代码同方案1，处理请求并返回结果即可。

内容的提问来源于stack exchange，提问作者JMA