Using Html service, get date input - calendar pop up

Question

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

Welcome to some random page
<         


        
                      

              相关标签:
       
      

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