Returning a value using Date picker in HTMLService / Google Apps Script

Question

I\'m trying to capture a date range that will be used inside a Document container-based GAS. I\'ve been successful displaying a dialog box that shows two jquery datepicker

Answer 1

Prepare a server-side function to receive your input. This one only logs it:

function submitDates(startDate,endDate) {
  Logger.log(JSON.stringify(arguments));
  // To send error messages, throw an exception.
  // e.g. if (invalid) throw new error("Invalid date")
}

Change the button handler in your html. Instead of closing the dialog, collect the input data and pass it to the server function using google.script.run. Attach handler to the runner; a success handler will close the window, for example. A failure handler will display server-side errors.

<input type="button" value="Create" onclick="submitDates()" />

Add this script to the bottom of your html:

<script>
// Pass input dates to server-side submitDates()
function submitDates() {
  var startDate = $("#startdatepicker").val();
  var endDate = $("#enddatepicker").val();

  google.script.run
        .withSuccessHandler(
           // Dates delivered, close dialog
           function() {
             google.script.host.close();
           })
           // Display failure messages
         .withFailureHandler(
           function() {
             var div = $('<div id="error" class="error">' + msg + '</div>');
             $(element).after($("#demo"));
           })
         .submitDates(startDate,endDate);
}

</script>