Google Apps Script网页应用中，如何根据日期输入框匹配并展示Google表格对应行的数据？

嘿，我来帮你搞定这个日期匹配的问题！你遇到的bug大概率是日期格式不统一或者时区差异导致的，咱们一步步来解决：

一、先把前端的交互逻辑理清楚 #

首先在你的Bootstrap页面里，把日期输入、触发按钮和表格结构搭好，然后写JS函数来传递日期参数并渲染结果：

<div class="container mt-3">
  <input type="date" id="reportDate" class="form-control mb-2">
  <button onclick="loadTargetReport()" class="btn btn-primary mb-3">加载当日报告</button>
  <table id="dailyReportTable" class="table table-striped">
    <thead>
      <tr>
        <th>日期</th>
        <th>报告内容1</th>
        <th>报告内容2</th>
        <th>其他字段</th>
      </tr>
    </thead>
    <tbody id="reportBody">
      <!-- 动态数据会插入这里 -->
    </tbody>
  </table>
</div>

<script>
function loadTargetReport() {
  const datePicker = document.getElementById('reportDate');
  const chosenDate = datePicker.value;
  
  // 先检查用户有没有选日期
  if (!chosenDate) {
    alert('麻烦先选个日期哦！');
    return;
  }

  // 调用后端的Google Apps Script函数，同时处理成功和失败的情况
  google.script.run
    .withSuccessHandler(renderReportTable)
    .withFailureHandler(error => alert('加载失败啦：' + error.message))
    .fetchReportByDate(chosenDate);
}

function renderReportTable(rowData) {
  const tableBody = document.getElementById('reportBody');
  // 先清空表格里的旧数据
  tableBody.innerHTML = '';

  if (!rowData || rowData.length === 0) {
    // 没找到对应日期的数据时显示提示
    const emptyRow = document.createElement('tr');
    emptyRow.innerHTML = `<td colspan="4">这个日期没有对应的报告哦</td>`;
    tableBody.appendChild(emptyRow);
    return;
  }

  // 把找到的行数据插入表格
  const newRow = document.createElement('tr');
  newRow.innerHTML = `
    <td>${rowData[0]}</td>
    <td>${rowData[1]}</td>
    <td>${rowData[2]}</td>
    <td>${rowData[3]}</td>
  `;
  tableBody.appendChild(newRow);
}
</script>

二、后端处理日期匹配的核心逻辑 #

这部分是关键！很多时候匹配失败就是因为表格里的日期是Date对象，和前端传的字符串格式不统一，咱们要把表格里的日期转成和前端完全一样的yyyy-MM-dd格式再对比：

// Google Apps Script 后端代码
function fetchReportByDate(selectedDate) {
  // 替换成你的表格ID和工作表名称
  const spreadsheet = SpreadsheetApp.openById('你的表格ID');
  const sheet = spreadsheet.getSheetByName('每日报告');
  const allData = sheet.getDataRange().getValues();

  // 跳过表头行（如果表头在第一行的话，从索引1开始遍历）
  for (let i = 1; i < allData.length; i++) {
    const currentRow = allData[i];
    const sheetDate = currentRow[0]; // 假设日期存在表格的第一列（索引0）
    
    // 把表格里的Date对象转成和前端一致的字符串格式，时区用脚本的时区避免偏差
    const formattedSheetDate = Utilities.formatDate(
      sheetDate,
      Session.getScriptTimeZone(),
      'yyyy-MM-dd'
    );

    // 现在格式统一了，直接对比字符串就行
    if (formattedSheetDate === selectedDate) {
      // 返回这一行的数据，同时把日期也转成字符串方便前端显示
      return [formattedSheetDate, currentRow[1], currentRow[2], currentRow[3]];
    }
  }

  // 遍历完没找到对应日期，返回空数组
  return [];
}

三、踩坑小提示 #

• 时区问题：一定要用Session.getScriptTimeZone()或者和你表格设置一致的时区，不然可能会因为时区差导致日期差一天（比如表格是北京时间，脚本用UTC的话，日期就会偏移）。
• 调试小技巧：如果还是匹配不到，可以在后端函数里加日志打印，看看格式化后的日期和前端传的是不是一样：

  Logger.log('前端传的日期：' + selectedDate);
  Logger.log('表格日期格式化后：' + formattedSheetDate);
  

  然后在脚本编辑器的「查看」-「日志」里看输出，就能快速定位问题啦！

内容来源于stack exchange