Date picker in HTMLService / Google Apps Script

Question

I would like to use a date picker to make easier the way to pick a date in an app that I am developing, however I dont know how to make it functional using HTML Service in Google Apps Script.

If you could provide me an example of this, I would really appreciate it since I really need it

I would like something like this: http://jqueryui.com/datepicker/

Solution

You just need to include the JQuery library in your code, a basic example is as follows :

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

Note the it is advised to separate style from html and script in different files, see the best practice article in Google HTML Service documentation, I didn't do it here to make the example short and easier to read.

Comments

[Fred]

Note: Setting Native mode is no longer necessary. It's the new default.

[Serge insas]

Right... I pasted that snippet from a code I had, this explains that :-)

[Javier Ramirez]

Thanks for your help, Serge, however I made some tests and it did work when I use the Native mode but I need to get the value of the calendar through a form (EMULATED mode), if not would be nonsense to use the calendar. If you could help me letting me know how can I retrieve the date of the calendar it would really be alifesaver. Thanks!