如何在 HTMLService / Google 脚本 / Sheet 中使用日期选择器 return 一个值?
How to return a value using Date picker in HTMLService / Google Script / Sheet?
在 google sheet 中,我有一个按钮可以打开 Jquery 日期选择器,调用 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>
任何评论都会有帮助
日期对象无法从 client-side 代码传递到 server-side 代码,但您可以以毫秒或字符串形式传递日期,然后在服务器端创建日期对象。
资源
相关
您需要做的几件事:
- 阅读 HTML Service: Communicate with Server Functions 文章,其中介绍了如何执行此操作。
- 您可能应该重命名您的
doGet()
函数,因为它是为 web apps 保留的,它不允许触发电子表格中模式的打开。
- 在您的 server-side 代码中添加一个函数来接收日期。
- 在您的 client-side 脚本中创建事件处理程序以获取日期更改。您可以创建一个按钮来触发它,但我使用了 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>
在 google sheet 中,我有一个按钮可以打开 Jquery 日期选择器,调用 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>
任何评论都会有帮助
日期对象无法从 client-side 代码传递到 server-side 代码,但您可以以毫秒或字符串形式传递日期,然后在服务器端创建日期对象。
资源
相关
您需要做的几件事:
- 阅读 HTML Service: Communicate with Server Functions 文章,其中介绍了如何执行此操作。
- 您可能应该重命名您的
doGet()
函数,因为它是为 web apps 保留的,它不允许触发电子表格中模式的打开。 - 在您的 server-side 代码中添加一个函数来接收日期。
- 在您的 client-side 脚本中创建事件处理程序以获取日期更改。您可以创建一个按钮来触发它,但我使用了 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>