Using Html service, get date input - calendar pop

Question

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

Answer 1

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