Setting default value in html form date input

Question

In a google-apps-script, I have an html form with two date inputs. I want to set the default values to be the prior week of the current day.

I cannot get the following scripts to work. Can anyone point out what I am doing wrong?

I am getting a "Object does not allow properties to be added or changed" error.

Code.gs:

function pickDates() {
  var d = new Date();
  var e = new Date();
  d.setDate((d.getDate() - d.getDay() % 7) - 7);
  e.setDate(e.getDate() - (e.getDay() + 1) % 7);
  d = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
  e = e.getFullYear() + '-' + (e.getMonth() + 1) + '-' + e.getDate();
  var htmlB = HtmlService.createHtmlOutputFromFile('Pick Dates').setWidth(200).setHeight(200);
  htmlB.d = d;
  htmlB.e = e;
  SpreadsheetApp.getUi().showModalDialog(htmlB, 'Select Dates');
}

Pick Dates.html:

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <form>
    Start Date<br>
    <input id="start" type="date" name="startDay">
    <br><br> End Date<br>
    <input id="end" type="date" name="endDay">
    <br><br>
    <input type="button" value="Submit" onclick="google.script.run
            .withSuccessHandler(google.script.host.close)
            .sendEmails(this.parentNode)" />
  </form>
  <script>
    document.getElementById('start').value = d;
    document.getElementById('end').value = e;
  </script>
</body>

</html>

What do you mean by "I cannot get them to work"? Are they producing an error? This is confusing — Colin
– Colin, Commented Nov 16, 2017 at 2:01

random-parts · Accepted Answer · 2017-11-16 02:31:10Z

To evaluate() the dates in the template, you will need to use createTemplateFromFile(). The error is because the HtmlOutput object returned from createHtmlOutputFromFile() can not have properties added like htmlB.d = d;. You can use a html template with scriptlets instead

function pickDates() {
  var d = new Date();
  var e = new Date();
  d.setDate((d.getDate() - d.getDay() % 7) - 7);
  e.setDate(e.getDate() - (e.getDay() + 1) % 7);
  d = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
  e = e.getFullYear() + '-' + (e.getMonth() + 1) + '-' + e.getDate();

  // create a template
  var htmlB = HtmlService.createTemplateFromFile('Pick Dates');
  htmlB.d = d;
  htmlB.e = e;

  // evaluate() returns HtmlOuput object
  var modal_html = htmlB.evaluate().setWidth(200).setHeight(200);

  SpreadsheetApp.getUi().showModalDialog(modal_html, 'Select Dates');
}

Pick Dates.html - add the printing scriptlets

...

  <script>
    document.getElementById('start').value = <?= d ?>;
    document.getElementById('end').value = <?= e ?>;
  </script>
</body>

Collectives™ on Stack Overflow

Setting default value in html form date input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related