We are trying to reduce the number of clicks required when selecting dates in a Google sheet side bar. In this specific case the side bar will be always open with several form fields to fill in and submit. On top of the form there should be a field for selecting a date.
The below experimental snippet works just fine (using a common date field, and a ‘materialize’ version as well), except that we want the date picker to stay always visible, embedded on top of the form. Currently one has to click into the date field and only then will the date picker pop-up. Also, after date selection it will disappear. This is what I am trying to avoid.
Is it possible to embed a date picker into the side bar and keep it always visible (while we should be able to fill in all other fields as well, and submit the form data)?
I have attempted to achieve this using the the container: property of the Materialize date picker without success (commented out in the code). Also, I could not find a usable answer to this subject on this platform even after considerable digging.
Code.gs
function showUserForm() {
var template = HtmlService.createTemplateFromFile("userform");
var html = template.evaluate().setTitle("Data Input");
SpreadsheetApp.getUi().showSidebar(html);
}
function appendData(data) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sh = ss.getSheetByName("Sheet2");
var arrOut = [data.name,data.phone];
sh.appendRow(arrOut);
}
userform.html
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="date" type="date" class="validate">
<label for="date">Date</label>
</div>
<div class="input-field col s12">
<input id="prefDate" type="text" class="datepicker">
<label for="prefDate" >Transaction Date</label>
</div><!-- Close Date -->
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="username" type="text" class="validate">
<label for="username">Your Name</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">phone</i>
<input id="tel" type="text" class="validate">
<label for="tel">Telephone</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var nameField = document.getElementById("username");
var phoneField = document.getElementById("tel");
document.getElementById("btn").addEventListener("click",addRecord);
//Date Picker Initialization
var datePicker = document.getElementById('prefDate');
M.Datepicker.init(datePicker,{
showClearBtn:true,
//container:"prefDate",
//autoClose:true,
});
function addRecord() {
var data = {
name: nameField.value,
phone: phoneField.value
};
google.script.run.appendData(data);
nameField.value = "";
phoneField.value = "";
M.toast({html: 'Record was updated.'})
}
</script>
</body>
</html>
