如何在HTMLService/Google脚本/Sheet中使用日期选择器返回值？

2022-05-27 00:00:00 google-sheets google-apps-script javascript jquery-ui-datepicker

在Google工作表中，我有一个按钮，它打开一个jQuery Datepicker，调用doGet函数。 我想要捕获用户给出的日期值。我怎么才能做到这一点呢？ 这是我的.gs：

function doGet() {
  var output = HtmlService.createTemplateFromFile('DatePicker')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setHeight(250)
      .setWidth(200)
      .setTitle('Select date');
  
 SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(output, 'Date');
}


function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

和html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
   <?!= include('Style'); ?>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  
  <script>  
  $(function() {    
  $('#datepicker').datepicker({changeMonth: true, changeYear: true, showButtonPanel: true});
});

  </script>
  
</head>
<body>
<div id="myCalendar"> 
<p>Date: <input type="text" id="datepicker"></p>
</div>
 
</body>
</html>

任何评论都会有帮助

解决方案

您需要做的几件事：

  1. 阅读HTML Service: Communicate with Server Functions文章，其中介绍了如何执行此操作。
  2. 您可能应该重命名doGet()函数，因为这是为web apps保留的，不应允许在电子表格中触发打开模式。
  3. 在服务器端代码中添加接收日期的函数。
  4. 在客户端脚本中创建事件处理程序以获取日期更改。您可以创建一个按钮来触发此操作，但我使用的是jQuery的.change()方法。
  5. 使用google.script.run将日期值发送到后台。
function showModal() {
  var output = HtmlService.createTemplateFromFile('DatePicker')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setHeight(250)
    .setWidth(200)
    .setTitle('Select date');
  
  SpreadsheetApp.getUi().showModalDialog(output, 'Date');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function receiveDate(dateStr) {
  console.log(dateStr);
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <?!= include('Style'); ?>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  
  <script>  
  $(function() {    
  $('#datepicker').datepicker({changeMonth: true, changeYear: true, showButtonPanel: true});
  $('#datepicker').change(function() {
    google.script.run.receiveDate(this.value);
  });
});

  </script>
  
</head>
<body>
<div id="myCalendar"> 
<p>Date: <input type="text" id="datepicker"></p>
</div>
 
</body>
</html>

相关文章