HTMLService / Google Apps腳本中的日期選擇器

Question

我想使用日期選擇器來簡化在正在開發的應用程序中選擇日期的方式，但是我不知道如何使用Google Apps腳本中的HTML Service使它起作用。

如果您能提供一個示例，我將不勝感激，因為我非常需要它

我想要這樣的東西： http : //jqueryui.com/datepicker/

Answer 1

您只需要在代碼中包含JQuery庫，一個基本示例如下：

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

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

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

click here : <input type="text" name="date" id="datepicker" />
<input type="text" id="alternate" size="30"></p>
<script>
    $( "#datepicker" ).datepicker({
      altField: "#alternate",
      altFormat: "DD, d MM, yy",
      showWeek: true,
      firstDay: 1,
     });
</script>

</div>

Code.gs：

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

請注意，建議您將樣式與HTML和腳本分開放在不同的文件中，請參閱Google HTML Service文檔中的最佳做法文章，此處沒有這樣做，是為了使示例簡短易懂。