如何根据html日期选择器选择值从数据库中选择记录

<input type="date" id="datePicker">

var datePicker = document.getElementById("datePicker");
var selectedDate = datePicker.value;

// 发送异步请求到后端服务器
var xhr = new XMLHttpRequest();
xhr.open("GET", "backend.php?date=" + selectedDate, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 处理从数据库返回的记录
    // ...
  }
};
xhr.send();

<?php
$date = $_GET["date"];

// 连接到数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);

// 查询数据库中的记录
$sql = "SELECT * FROM records WHERE date = '$date'";
$result = $conn->query($sql);

// 处理查询结果
if ($result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    // 处理每条记录
    // ...
  }
} else {
  // 没有匹配的记录
}

// 关闭数据库连接
$conn->close();
?>

<table>
  <tr>
    <th>字段1</th>
    <th>字段2</th>
    <!-- 其他字段 -->
  </tr>
  <?php while ($row = $result->fetch_assoc()) { ?>
    <tr>
      <td><?php echo $row["field1"]; ?></td>
      <td><?php echo $row["field2"]; ?></td>
      <!-- 其他字段 -->
    </tr>
  <?php } ?>
</table>