如何根据表单Duration计算归还日期并同步至谷歌表格/Excel

首先把日期计算逻辑改成可复用函数，同时监听Duration字段的变化来实时更新日期，调整后的代码如下：

1. 调整HTML结构 #

将原来的<span>改成只读<input>（确保表单提交时能携带该值，为后续同步表格做准备），同时添加Duration选择字段（以下示例用下拉框，可根据实际字段类型调整）：

<!-- Duration选择字段 -->
<select id="duration" name="duration" class="form-control">
  <option value="3">3周</option>
  <option value="5">5周</option>
  <option value="7">7周</option>
</select>

<!-- Return Date显示字段 -->
<input type="text" id="returnDate" name="returnDate" class="form-control" readonly>

2. 编写JavaScript逻辑 #

封装日期计算函数，监听Duration的变化事件，实时更新Return Date：

// 计算并格式化指定天数后的日期
function calculateReturnDate(addDays) {
  const d = new Date();
  d.setDate(d.getDate() + addDays);
  
  const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  const monthname = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  
  return `${weekday[d.getDay()]} ${d.getDate()} ${monthname[d.getMonth()]} ${d.getFullYear()}`;
}

// 页面初始化时，根据默认选中的Duration计算日期
function initReturnDate() {
  const durationSelect = document.getElementById('duration');
  const weeks = parseInt(durationSelect.value);
  document.getElementById('returnDate').value = calculateReturnDate(weeks * 7);
}

// 监听Duration变化，实时更新Return Date
document.getElementById('duration').addEventListener('change', function() {
  const weeks = parseInt(this.value);
  document.getElementById('returnDate').value = calculateReturnDate(weeks * 7);
});

// 页面加载完成后执行初始化
window.onload = initReturnDate;

这样用户切换周数时，Return Date会自动更新为当前日期加上对应周数后的日期。

同步到Google Sheets #

核心是确保表单提交时携带returnDate字段的值，再通过Google Apps Script接收数据并写入表格：

1. 修改表单提交配置
   确保表单标签包含action和method，指向Google Apps Script部署的Web App地址：

<form action="你的Apps Script Web App URL" method="POST">
  <!-- 其他表单字段 -->
  <select id="duration" name="duration" class="form-control">...</select>
  <input type="text" id="returnDate" name="returnDate" class="form-control" readonly>
  <button type="submit">提交</button>
</form>

2. 编写Google Apps Script
   打开目标Google Sheet，点击「扩展程序」→「Apps脚本」，替换默认代码：

function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // 按顺序整理提交的字段数据
  const data = [
    new Date(), // 记录提交时间
    e.parameter.duration,
    e.parameter.returnDate,
    // 其他表单字段按需求添加
  ];
  sheet.appendRow(data);
  // 返回成功响应
  return ContentService.createTextOutput(JSON.stringify({status: "success"})).setMimeType(ContentService.MimeType.JSON);
}

3. 部署Web App
   点击「部署」→「新部署」，选择类型为「Web应用」，设置：

• 执行：我
• 谁可以访问：任何人（可根据需求调整权限）
  部署后复制生成的Web App URL，替换到表单的action属性中即可。

同步到在线Excel #

通过Microsoft Power Automate实现：

1. 打开Power Automate，创建「当HTTP请求收到时」的触发器，设置请求方法为POST，请求体格式为表单数据。
2. 添加「添加行到表格」动作，选择你的在线Excel表格和目标工作表，将触发器中的字段（包括returnDate）映射到对应表格列。
3. 保存流后，复制触发器的HTTP URL，替换到表单的action属性中。提交表单时，Power Automate会自动将数据写入Excel表格。

注意：无论同步到哪个平台，必须确保returnDate字段在表单提交时被正确携带，这也是之前将span改为input的关键原因。

内容的提问来源于stack exchange，提问作者Jeff Ryad Arlan Cal