使用Html服务，获取日期输入 - 日历弹出 [英] Using Html service, get date input - calendar pop up

问题描述

我试图获得一个使用google html服务的基本html页面。截至目前，我有：

 < div> 
< h1>欢迎使用一些随机页面< / h1> 
< p>请在下面选择一个日期：< / p> 
< input type =datename =classDateonselect =google.script.run.dateSelect（）> 
< / div> 
  

在一个普通的html文件中，我可以从一个小日历视图中选择一个日期，但在这个谷歌网络应用我似乎无法做到这一点。我看到谷歌的'UI服务'有一个日期选择器（ https：/ /developers.google.com/apps-script/reference/ui/date-picker ），但我不明白如何将其放入我的webapp。我如何获得这个谷歌网站应用程序弹出的小日历？ - 用户界面日期选择器。

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

 函数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）; 
返回应用程序; 
} 
  

解决方案

和HTML服务，请尝试JQuery datepicker，如下面的示例所示：

还请阅读 doc here

code.gs

  function doGet（）{
 return HtmlService.createHtmlOutputFromFile（'html.html'）。setSandboxMode（HtmlService.SandboxMode.NATIVE）; 
} 
  

html.html

 < DIV> 
< link rel =stylesheethref =// 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> 
选择日期：< input type =textname =dateid =datepicker/> 
< script> 
 $（＃datepicker）。datepicker（）; 
< / script> 
 
< / div> 
  

在线示例：这里 b
$ b

关于你对使用SpreadsheetApp的评论，在此处查看文档

---

编辑：下面是关于速度的评论，这是一个链接到Google托管库的版本，速度更快。

 < div class =demo>添加一些样式（在线示例更新） 
< style type =text / css> .demo {margin：30px;颜色：#AAA; font-family：arial sans-serif; font-size：10pt} 
 p {color：red; font-size：14pt} 
< / style> 
< link rel =stylesheethref =// 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>欢迎使用一些随机页面< / h1> 
 
< p>请在下面选择一个日期：< / p> 
 
点击这里：< input type =textname =dateid =datepicker/> 
 
< script> 
 $（＃datepicker）。datepicker（）; 
< / script> 
 
< / div> 
  

您也可以选择不同的样式...
尝试用平滑度替换redmond或south-street，doc位于 JQuery网站

I'm trying to get a basic html page working with the google html service. As of now I have:

<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>

In a regular html file I get to pick a date from a little calendar view, but in this google web app I can't seem to do that. I see the 'UI service' from google has a datepicker ( https://developers.google.com/apps-script/reference/ui/date-picker ) but I dont understand how to get it into my webapp. How do I get the little calendar pop up in this google web app? - UI date picker or not.

I've added the date picker to my code.gs file but it still doesnt come up.

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;
}

解决方案

you can't mix UiApp and HTML service, try the JQuery datepicker as shown in the example below :

read also 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>

online example : here

And about your comment on using SpreadsheetApp, see doc here

---

edit : following comments about speed, here is a version that link to the Google hosted library to be faster. Added some style too (online example updated)

<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>

You can also choose a different style... try to replace "smoothness" with "redmond" or "south-street", doc is on the JQuery site

这篇关于使用Html服务，获取日期输入 - 日历弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！