return value from input field in dialog box to var in code.gs using Google Apps Script

Question

I've been working on a Google Sheet that triggers a dialog box on open. What I haven't been able to do is figure out how to get the values from the input fields to variables in code.gs

I've been looking for tutorials and code examples for quite some time and haven't been able to find anything that will help me understand how to get this done.

Now... in this specific case, I only need to get a date from a date picker in the dialog box. When clicking the button to run a function from code.gs, I want to figure out how to get the value from the datepicker into the function.

What I have so far is:

code.gs:

function optionOverlay() {
  var html = HtmlService.createHtmlOutputFromFile('overlayHTML')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)


  SpreadsheetApp.getUi()
    .showModalDialog(html,' ')
}

function blankSheet() {
  // The code below activates the Schedule Template and creates a duplicate of the blank template sheet.
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var st = ss.getSheetByName("Schedule Template");
  st.activate()
  SpreadsheetApp.getActiveSpreadsheet().duplicateActiveSheet();

  // This changes the contents of the cell (I1) to the date from the dialog box.
  var dialogDate = ?????
  SpreadsheetApp.getActiveSheet().getRange('I1').setValue(dialogDate);

  // This changes the new sheet's name to the date range of the week [based on cell (I2)].
  var dateRange = SpreadsheetApp.getActiveSheet( ).getRange("I2").getValue();
  SpreadsheetApp.getActiveSpreadsheet().renameActiveSheet(dateRange);

}

overlayHTML:

<h1>Create new schedule for the week starting on: </h1>

<input type="date" name="datePicker" id="datePicker" />

<button onclick="google.script.run.blankSheet()">Create schedule all new schedule</button>
<button onclick="google.script.run.copyLast()">Use last week as template</button>

</div>

I've seen a lot about creating jQuery calendars and event handlers in the depreciated ui service but nothing about how to get the data from one place to another using the HtmlService. I'm pretty confused at this point and would love any direction.

Answer 1

To get a value out of an input tag, you can use the DOM method getElementById('idName') and the value property of the element.

<input type="date" name="datePicker" id="datePicker" />

<button onclick="sendInputToGS()">Create schedule all new schedule</button>

<script>
  window.sendInputToGS = function() {
    var theDate = document.getElementById("datePicker").value;
    google.script.run.blankSheet(theDate)
  }
</script>

In the Code.gs file, you need to retrieve the sent value with an argument in the parenthesis.

function blankSheet(dateArg) { //dateArg receives the value sent