时间戳

首页 > 解决方案 > 如何在自定义 HTML 对话框中获取日期文本输入以加载来自 Google 表格的值？

html - 如何在自定义 HTML 对话框中获取日期文本输入以加载来自 Google 表格的值？

问题描述

我正在尝试将 Google 表格中自定义 (HTML) 对话框上的文本输入值更改为等于我的 Google 表格中的值。我怎样才能做到这一点？

我知道为了设置文本输入的 .value 需要应用正确的日期格式。我可以使用 .gas 中的“实用程序”服务。

我尝试使用该onload="getDate()"事件来运行一个函数，该函数使用var date = new Date()in设置值，getDate()而不是直接从工作表中获取值，但这似乎不起作用。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

    <style>
    label {font-family: verdana;}

    body {
    border: 1px solid powderblue;
    padding: 30px;
    }
    </style>
  </head>
  <body  onload="getDate()">

<form id="myForm">
  <label>Task Number:</label><br>
  <input type="text" name="taskNumber" value="">
  <br><br>
   <label>Task Date:</label><br>
  <input type="date" name="taskDate" value="" id="demo" >
  <br><br>
   <label>Customer Name:</label><br>
  <input type="text" name="customerName" value="">
  <br><br>
   <label>Customer Site:</label><br>
  <input type="text" name="customerSite" value="">
  <br><br>
   <label>Status:</label><br>
  <select name="status">
  <option value="NOSTATUS">Choose</option>
  <option value="ON HOLD">ON HOLD</option>
  <option value="SCHEDULED">SCHEDULED</option>
  <option value="RESCHEDULE">RESCHEDULE</option>
  <option value="WORK IN PROGRESS">WORK IN PROGRESS</option>
  </select>
  <br><br>
   <label>Status Date:</label><br>
  <input type="date" name="statusDate" value="">
  <br><br>
   <label>Location:</label><br>
  <input type="text" name="location" value="">
  <br><br>
   <label>Description:</label><br>
  <input type="text" name="description" value="">
  <br><br>
  <input type="button" style="font-family: verdana;" value="Submit" onclick="uploadTask()">

</form> 

  <script>
  function success(msg) {
    alert(msg);
  }

  function uploadTask(){
    var form = document.getElementById("myForm").elements;
    var obj ={};
    for(var i = 0 ; i < form.length ; i++){
        var item = form.item(i);
        obj[item.name] = item.value;
    }
    google.script.run
    .withSuccessHandler(success)
    .uploadTask(obj);

    google.script.host.close();
  }

  function getDate(){
  var ss = SpreadsheetApp.openById('1CtH3uNeSiJcRd_ZKE3iWp7TEtAO_B7uCNatGJ7rHMeg');
  var monthly = ss.getSheetByName('MONTHLY');         
  var date = monthly.getRange(1, 1).getValue(); //The value of A:1 = 10/12/2000 date 

  date = Utilities.formatDate(date, Session.getScriptTimeZone(), "YYYY-MM-dd")

  document.getElementById("demo").value = date;

  }
  </script>
  </body>
</html>

标签： htmlgoogle-apps-script

解决方案

这个改装怎么样？我认为您的情况有几个答案。因此，请将此视为其中之一。

修改点：

  • 在您的显示脚本中，HTML 中有 GAS 脚本。GAS 不能直接在 HTML 中运行。
    • 在这种情况下，我使用了google.script.run.
    • 中的 GAS 脚本getDate()已从“.html”移至“.gs”。

修改后的脚本：

请getDate()在“.html”文件中修改为以下脚本。

function getDate() {
  google.script.run.withSuccessHandler((e) => {
    document.getElementById("demo").value = e;
  }).getDate();
}

接下来，请将以下函数添加到“.gs”文件中。

function getDate() {
  var ss = SpreadsheetApp.openById('1CtH3uNeSiJcRd_ZKE3iWp7TEtAO_B7uCNatGJ7rHMeg');
  var monthly = ss.getSheetByName('MONTHLY');
  var date = monthly.getRange(1, 1).getValue(); //The value of A:1 = 10/12/2000 date
  return Utilities.formatDate(date, Session.getScriptTimeZone(), "YYYY-MM-dd");
}

笔记：

  • “.gs”文件是您使用的项目中的脚本之一。我认为它是用来打开对话框的。
  • 如果“.gs”文件中有相同的函数名，请修改。

参考：

推荐阅读