在HTMLService / Google Apps脚本中使用日期选择器返回值 [英] Returning a value using Date picker in HTMLService / Google Apps Script
问题描述
我试图捕获将在基于文档容器的GAS中使用的日期范围。我已经成功地显示了一个对话框,其中显示了两个jquery datepicker对象,在这篇文章中使用了Serge伟大的例子:
HTMLService / Google Apps脚本中的日期选择器
。
。
...但是,如何将这两个日期值从html逻辑返回给我的GAS代码?
I'm trying to capture a date range that will be used inside a Document container-based GAS. I've been successful displaying a dialog box that shows two jquery datepicker objects using Serge's great example in this post: Date picker in HTMLService / Google Apps Script . . ...but, how can I return the two date values back to my GAS code from the html logic?
预先感谢!
function onOpen() {
var ui = DocumentApp.getUi();
ui.createMenu('Create Calendar')
.addItem('Provide Date Range', 'showDialog')
.addToUi();
}
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('dateDialog')
.setWidth(500)
.setHeight(400);
DocumentApp.getUi()
.showModalDialog(html, 'Please provide a Date Range');
Logger.log("HTML return = %s", html.getContent()); // What does html contain?
}
================ ==== dateDialog.html ======================
==================== dateDialog.html ======================
<div class="demo" >
<style type="text/css"> .demo { margin: 30px ; color : #AAA ; font-family : arial sans-serif ;font-size : 10pt }
p { color : red ; font-size : 11pt }
</style>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<p>Please select a date below :</p>
<p> Start Date : <input type="text" name="StartDate" id="startdatepicker" /> </p>
<p> End Date : <input type="text" name="EndDate" id="enddatepicker" /> </p>
<script>
$( "#startdatepicker" ).datepicker({
showWeek: true,
firstDay: 0,
});
</script>
<script>
$( "#enddatepicker" ).datepicker({
showWeek: true,
firstDay: 0,
});
</script>
<input type="button" value="Close" onclick="google.script.host.close()" />
</div>
推荐答案
准备一个服务器端函数来接收您的输入。这只记录它:
Prepare a server-side function to receive your input. This one only logs it:
function submitDates(startDate,endDate) {
Logger.log(JSON.stringify(arguments));
// To send error messages, throw an exception.
// e.g. if (invalid) throw new error("Invalid date")
}
更改按钮处理程序在您的HTML。收集输入数据并使用 google.script.run
传递给服务器函数,而不是关闭对话框。将处理程序附加到跑步者;例如,成功处理程序将关闭窗口。失败处理程序将显示服务器端错误。
Change the button handler in your html. Instead of closing the dialog, collect the input data and pass it to the server function using google.script.run
. Attach handler to the runner; a success handler will close the window, for example. A failure handler will display server-side errors.
<input type="button" value="Create" onclick="submitDates()" />
将此脚本添加到您的html底部:
Add this script to the bottom of your html:
<script>
// Pass input dates to server-side submitDates()
function submitDates() {
var startDate = $("#startdatepicker").val();
var endDate = $("#enddatepicker").val();
google.script.run
.withSuccessHandler(
// Dates delivered, close dialog
function() {
google.script.host.close();
})
// Display failure messages
.withFailureHandler(
function() {
var div = $('<div id="error" class="error">' + msg + '</div>');
$(element).after($("#demo"));
})
.submitDates(startDate,endDate);
}
</script>
这篇关于在HTMLService / Google Apps脚本中使用日期选择器返回值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!