Google Apps Script无法将含日期的数据传递至HTML表单

问题根源 #

google.script.run在跨端传递数据时，无法直接正确序列化Google Sheets中的Date对象。服务器端的Date对象在传递到前端时会被处理成无法识别的格式，最终导致前端接收为null。

解决方法 #

核心思路是在服务器端将日期转换为字符串格式（ISO标准字符串或自定义格式），前端再根据需求转换或直接使用。

方案1：转换为ISO标准字符串（推荐）

服务器端（.gs文件）修改getTaskData函数，将日期转成ISO字符串：

function getTaskData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const activeRow = sheet.getActiveRange().getRow();
  const rowData = sheet.getRange(activeRow, 1, 1, sheet.getLastColumn()).getValues()[0];
  
  // 遍历数据，将Date对象转为ISO字符串
  return rowData.map(cell => {
    if (cell instanceof Date) {
      return cell.toISOString();
    }
    return cell;
  });
}

前端（HTML中的getExistingTask函数）接收后，可转回Date对象或直接适配表单：

function getExistingTask() {
  google.script.run
    .withSuccessHandler(data => {
      // 处理数据，将ISO字符串转回Date（按需）
      const processedData = data.map(item => {
        if (typeof item === 'string' && !isNaN(Date.parse(item))) {
          return new Date(item);
        }
        return item;
      });
      
      // 填充日期输入框（示例：适配input[type="date"]）
      document.getElementById('task-date').value = processedData[0].toISOString().split('T')[0];
      // 其他表单字段填充逻辑...
    })
    .withFailureHandler(err => console.error('获取数据失败:', err))
    .getTaskData();
}

方案2：自定义日期格式

如果需要特定格式的日期字符串（如YYYY-MM-DD），可在服务器端直接格式化：

function getTaskData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const activeRow = sheet.getActiveRange().getRow();
  const rowData = sheet.getRange(activeRow, 1, 1, sheet.getLastColumn()).getValues()[0];
  const timeZone = Session.getScriptTimeZone(); // 确保时区一致
  
  return rowData.map(cell => {
    if (cell instanceof Date) {
      // 自定义格式，比如"yyyy-MM-dd HH:mm:ss"
      return Utilities.formatDate(cell, timeZone, "yyyy-MM-dd");
    }
    return cell;
  });
}

前端可直接将字符串赋值给日期输入框：

function getExistingTask() {
  google.script.run
    .withSuccessHandler(data => {
      document.getElementById('task-date').value = data[0];
      // 其他字段处理...
    })
    .getTaskData();
}

注意事项 #

• 时区问题：使用Session.getScriptTimeZone()保证服务器端和前端的时区一致，避免日期显示偏差。
• 时间+日期场景：若需传递时间，调整格式字符串为"yyyy-MM-dd HH:mm:ss"，前端对应使用<input type="datetime-local">。

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