Posted on by

How to Create Date Picker on Google Web App

In this post, I demonstrate how to create a Date Picker on HTML form in a Google Web App. This helps the user to easily select the date as well as keep it in a uniform format.

How to Video:

Video Notes:

  • Legacy Apps Script Editor Used in Video.
  • Apps Script (Script Editor) is now located under tab ‘Extensions’ instead of ‘Tools’ on Google Sheets.
  • JQuery Library. Click Here
  • For Further Details on Deploying a Web App Click Here

Code in Video:

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('WebApp');
}

function AddRecord(name, startdate, enddate) {
  var url = '';  //Paste URL of GOOGLE SHEET
  var ss= SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("Sheet1");
  webAppSheet.appendRow([name, startdate, enddate]);
  
}
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
    $( document ).ready(function() {
      $("#startdate").datepicker();
      $("#enddate").datepicker();
    });
    function AddRecord()
    {
      var name = document.getElementById("name").value;
      var startdate = document.getElementById("startdate").value;
      var enddate = document.getElementById("enddate").value;
      google.script.run.AddRecord(name, startdate, enddate);
      document.getElementById("name").value = '';
      document.getElementById("startdate").value = '';
      document.getElementById("enddate").value = '';
    }
    </script>
  </head>
  <body>
    Name:<input type="text" id="name" />
    Start Date:<input type="text" id="startdate" /> 
    End Date:<input type="text" id="enddate" />
    <input type="button" value="Add" onclick="AddRecord()" />
  </body>
</html>

Related Posts

Embed Map with Marker Google Web App Embed Map with Marker on Google Web App - In this post, I demonstrate how to embed a map with a marker on a Web App using locations from Google Sheets. I am using the Leaflet Javascript Library.
Create Charts in Google Web App Create Charts in Web Apps using Google Sheets - In this post, I demonstrate how to use the Chart.js JavaScript library to create Charts on a Web App using data from Google Sheets.
Autocomplete Field Google Web App How to use Autocomplete Field on Google Web App - In this post, I demonstrate how to use the JQuery Autocomplete Field within a Bootstrap Form on Google Web App. This helps with narrowing down a list of values for easier selection on a dropdown
JQuery Tablesorter Web App JQuery Tablesorter on Google Web App - In this post, I demonstrate how to use the JQuery Tablesorter on a Google Web App. This is a good way to sort, filter and scroll through a table data.
Colorbox Google Web App Create Nested View on Google Web App using Colorbox - In this post, I demonstrate how to create a nested view using Colorbox jQuery library on Google Web Application.

Published by codewithcurt