如何在HTMLService/Google脚本/Sheet中使用日期选择器返回值？ [英] How to return a value using Date picker in HTMLService / Google Script / Sheet?
本文介绍了如何在HTMLService/Google脚本/Sheet中使用日期选择器返回值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在Google工作表中，我有一个按钮，它打开一个jQuery Datepicker，调用doGet函数。 我想要捕获用户给出的日期值。我怎么才能做到这一点呢？ 这是我的.gs：
function doGet() {
var output = HtmlService.createTemplateFromFile('DatePicker')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setHeight(250)
.setWidth(200)
.setTitle('Select date');
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(output, 'Date');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
和html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<?!= include('Style'); ?>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$('#datepicker').datepicker({changeMonth: true, changeYear: true, showButtonPanel: true});
});
</script>
</head>
<body>
<div id="myCalendar">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
任何评论都会有帮助
推荐答案
您需要做的几件事：
- 阅读HTML Service: Communicate with Server Functions文章，其中介绍了如何执行此操作。
- 您可能应该重命名
doGet()函数，因为这是为web apps保留的，不应允许在电子表格中触发打开模式。 - 在服务器端代码中添加接收日期的函数。
- 在客户端脚本中创建事件处理程序以获取日期更改。您可以创建一个按钮来触发此操作，但我使用的是jQuery的
.change()方法。 - 使用
google.script.run将日期值发送到后台。
function showModal() {
var output = HtmlService.createTemplateFromFile('DatePicker')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setHeight(250)
.setWidth(200)
.setTitle('Select date');
SpreadsheetApp.getUi().showModalDialog(output, 'Date');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function receiveDate(dateStr) {
console.log(dateStr);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<?!= include('Style'); ?>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$('#datepicker').datepicker({changeMonth: true, changeYear: true, showButtonPanel: true});
$('#datepicker').change(function() {
google.script.run.receiveDate(this.value);
});
});
</script>
</head>
<body>
<div id="myCalendar">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
这篇关于如何在HTMLService/Google脚本/Sheet中使用日期选择器返回值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
