在 HTMLService / Google Apps 脚本中使用日期选择器返回值答案

【问题标题】：Returning a value using Date picker in HTMLService / Google Apps Script在 HTMLService / Google Apps 脚本中使用日期选择器返回值
【发布时间】：2014-07-19 13:48:25
【问题描述】：

我正在尝试捕获将在基于 Document 容器的 GAS 中使用的日期范围。我已经成功地显示了一个对话框，该对话框显示了两个 jquery datepicker 对象，使用 Serge 在这篇文章中的出色示例： Date picker in HTMLService / Google Apps Script . . ...但是，如何将这两个日期值从 html 逻辑返回到我的 GAS 代码？

提前致谢！

function onOpen() {
  var ui = DocumentApp.getUi();
  ui.createMenu('Create Calendar')
      .addItem('Provide Date Range', 'showDialog')
      .addToUi();
}

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('dateDialog')
      .setWidth(500)
      .setHeight(400);
  DocumentApp.getUi() 
      .showModalDialog(html, 'Please provide a Date Range');
  Logger.log("HTML return = %s", html.getContent());     // What does html contain?
}

==================== dateDialog.html ======================

<div class="demo" >
<style type="text/css"> .demo { margin: 30px ; color : #AAA ; font-family : arial sans-serif ;font-size : 10pt } 
                            p { color : red ; font-size : 11pt } 
</style>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<p>Please select a date below :</p>

<p> Start Date : <input type="text" name="StartDate" id="startdatepicker" /> </p>
<p> End Date :   <input type="text" name="EndDate" id="enddatepicker" /> </p>
<script>
    $( "#startdatepicker" ).datepicker({
      showWeek: true,
      firstDay: 0,
     });
</script>
<script>
    $( "#enddatepicker" ).datepicker({
      showWeek: true,
      firstDay: 0,
     });
</script>
<input type="button" value="Close" onclick="google.script.host.close()" />
</div>

【问题讨论】：

标签： google-apps-script

【解决方案1】：

准备一个服务器端函数来接收您的输入。这个只记录它：

function submitDates(startDate,endDate) {
  Logger.log(JSON.stringify(arguments));
  // To send error messages, throw an exception.
  // e.g. if (invalid) throw new error("Invalid date")
}

更改 html 中的按钮处理程序。不要关闭对话框，而是收集输入数据并使用google.script.run 将其传递给服务器函数。将处理程序附加到跑步者；例如，成功处理程序将关闭窗口。故障处理程序将显示服务器端错误。

<input type="button" value="Create" onclick="submitDates()" />

将此脚本添加到 html 的底部：

<script>
// Pass input dates to server-side submitDates()
function submitDates() {
  var startDate = $("#startdatepicker").val();
  var endDate = $("#enddatepicker").val();

  google.script.run
        .withSuccessHandler(
           // Dates delivered, close dialog
           function() {
             google.script.host.close();
           })
           // Display failure messages
         .withFailureHandler(
           function() {
             var div = $('<div id="error" class="error">' + msg + '</div>');
             $(element).after($("#demo"));
           })
         .submitDates(startDate,endDate);
}

</script>

【讨论】：