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 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 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.
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 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.
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.