如何在Google Apps Script HTML模板表格中格式化日期为dd/mm/yyyy

我正在用Google Apps Script开发应用，用来读取Google Sheets的数据并在HTML应用里展示。已经成功获取了目标数据区域，其中日期列在Sheets里存储为dd/mm/yyyy格式，但运行HTML模板时，日期显示成了类似Sat Jun 03 2023 00:00:00 GMT-0300 (GMT-03:00)的格式。我用materialize.css的日期选择器收集日期，相关代码片段如下：

Google Apps Script数据获取函数 #

function travelsTable() {
  var ss = SpreadsheetApp.openByUrl(url);
  var sheetViagens = ss.getSheetByName("viagens");
  var dateViagens = sheetViagens.getRange(2,1,40,1);
  var listaDates = dateViagens.getValues();
}

表格行拼接代码 #

for (var i = 0; i < listaDates.length; i++) {
  if (listaDates[i][0] != "") {
    linesViagens += "<tr><td class='center-align'>" + listaDates[i][0] + "</td>";
  }
}

HTML文件引用 #

<body>
  <h2 class="center-align">Dashboard de Solicitações </h2>
  <br>
  <?!= headTableViagens; ?>
  <?!= linesViagens; ?>
  <?!= footTableViagens; ?>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>

两种解决方法 #

方法一：在Google Apps Script端格式化日期 #

从Sheets获取的日期是原生Date对象，直接用GAS内置的Utilities.formatDate()工具函数将其转为dd/mm/yyyy格式的字符串，再传给HTML模板。

修改后的travelsTable函数：

function travelsTable() {
  var ss = SpreadsheetApp.openByUrl(url);
  var sheetViagens = ss.getSheetByName("viagens");
  var dateViagens = sheetViagens.getRange(2,1,40,1);
  var listaDates = dateViagens.getValues();
  
  // 遍历数组，将Date对象格式化为dd/mm/yyyy字符串
  listaDates = listaDates.map(row => {
    if (row[0] instanceof Date) {
      // 使用脚本时区（或指定时区如"GMT-03:00"）
      return [Utilities.formatDate(row[0], Session.getScriptTimeZone(), "dd/MM/yyyy")];
    }
    return row;
  });
  
  // 后续拼接表格行的逻辑不变
}

表格行拼接代码无需额外修改，直接使用格式化后的字符串即可。

方法二：在前端HTML中格式化日期 #

如果希望在前端处理日期格式，可以保留Date对象的原始传递，在HTML中通过JavaScript脚本遍历表格单元格，将日期字符串转为目标格式。

修改后的HTML文件：

<body>
  <h2 class="center-align">Dashboard de Solicitações </h2>
  <br>
  <?!= headTableViagens; ?>
  <?!= linesViagens; ?>
  <?!= footTableViagens; ?>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    // 遍历所有日期单元格，格式化显示
    document.querySelectorAll('td.center-align').forEach(cell => {
      const text = cell.textContent;
      // 判断是否为Date对象的字符串表示
      if (text.includes('GMT')) {
        const date = new Date(text);
        // 补零处理：确保日、月为两位数
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
        const year = date.getFullYear();
        cell.textContent = `${day}/${month}/${year}`;
      }
    });
  </script>
</body>

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