Question

我正在尝试使用google html服务的基本html页面。截至目前，我有：

<div>
<h1>Welcome to some random page</h1>
<p>Please select a date below:</p>
<input type="date" name="classDate" onselect="google.script.run.dateSelect()">
</div>

在常规的html文件中，我可以从一个小日历视图中选择一个日期，但在这个谷歌网络应用程序中我似乎无法做到这一点。我看到来自谷歌的'UI服务'有一个日期选择器（https://developers.google.com/apps-script/reference/ui/date-picker），但我不明白如何将其纳入我的webapp。如何在此google网络应用中弹出小日历？ - UI日期选择器与否。

我已将日期选择器添加到我的code.gs文件中，但它仍然没有出现。

function doGet(request) {
  return HtmlService.createHtmlOutputFromFile('index');
}

function dateSelect() {
  var app = UiApp.createApplication();
  var handler = app.createServerHandler("change");
  var date = app.createDatePicker().setPixelSize(150, 150).addValueChangeHandler(handler).setId("date");
  app.add(date);
  return app;
}

Answer 1

您无法混合使用UiApp和HTML服务，请尝试使用JQuery日期选择器，如下例所示：

另请阅读the doc here

code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('html.html').setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

中将Html.HTML

<div>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Choose date : <input type="text" name="date" id="datepicker" />
<script>
$("#datepicker").datepicker();
</script>

</div>

在线示例：here

关于您对使用SpreadsheetApp，see doc here

的评论

编辑：在关于速度的评论之后，这是一个链接到Google托管库的版本更快。添加了一些样式（在线示例更新）

<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 : 14pt } 
</style>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/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>

<h1>Welcome to some random page</h1>

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

click here : <input type="text" name="date" id="datepicker" />

<script>
$("#datepicker").datepicker();
</script>

</div>

你也可以选择不同的风格...... 尝试用“redmond”或“south-street”代替“smoothness”，doc在JQuery site

使用Html服务，获取日期输入 - 日历弹出

1 个答案: