我一直在寻找StackOverflow问题Datepicker: Disabling dates in the data的答案。我已经成功开发了一个小型的Webapp，它使用beforeShowDay选项和一组硬编码的日期从jQuery Datepicker中排除了特定的日期。
问题
目前，排除日期的数组是硬编码的，但是这些日期应动态生成。尽管我在code.gs getuserdates()中有一个函数，该函数将返回“ userdates”数组["12/13/2019","12/14/2019","12/16/2019","12/17/2019","12/24/2019"]，但我在网上找不到一个引用来解释如何将数组值动态传递给webapp。
@Tanaike对Disable dates in the datepicker based on values from the Google Sheet using Google Apps Script的回答似乎与此问题有关，但是我无法适应任何包含数组的成功代码。我认为部分问题是Tanaike的答案是100％使用Javascript，而这种情况需要Javascript和jQuery。
我尝试了scriptlet（不希望它们起作用，但您永远不会知道。它们都产生了错误Uncaught SyntaxError: Unexpected token '<'
-
var userdates = <? getuserdates(); ?> -
var userdates = <?= getuserdates(); ?> -
var userdates = <?!= getuserdates(); ?>
目标
要动态更新变量array的值。
代码
以下代码可完美运行；唯一的问题是数组值是硬编码的。
code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('Page')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getcontent();
}
function getuserdates() {
var ss = Spreadsheetapp.getactiveSpreadsheet()
var sheetname = "VL Request";
var datasheet = ss.getSheetByName(sheetname);
// assume user name
//var username = Session.getEffectiveUser().getusername()
var username = "user1";
// set variables
var datafirstrow = 2;
var dataLR = datasheet.getLastRow();
var dataLC = datasheet.getLastColumn();
var datasheetRange = datasheet.getRange(datafirstrow,1,dataLR-datafirstrow+1,dataLC);
//Logger.log(datasheetRange.geta1Notation());
// sort the data by date
datasheetRange.sort(6); // sort by Column F - VL date
var datasheetData = datasheetRange.getDisplayValues();
//Logger.log(datasheetData);
// get the user names as an array
var datanames = datasheetData.map(function(e){return e[2];});//[[e],[e],[e]]=>[e,e,e]
//Logger.log(datanames); // DEBUG
//Logger.log(datanames.length) // DEBUG
// create an array to hold any dates
var userdates = [];
// loop through the user names; test for equivalence to "username",and save VF date to an array
for (var i=0;i<datanames.length;i++){
//Logger.log("dataname = "+datanames[i])
if (datanames[i] === username){
// Logger.log("DEBUG: i= "+i+",user name = "+datanames[i]+",VL date = "+datasheetData[i][5]);
userdates.push('"' + datasheetData[i][5]+ '"');
}
else{
// Logger.log("DEBUG: i= "+i+" - no match");
}
}
// resort the data by Timestamp
datasheetRange.sort(1); // sort by Column A
if (userdates.length !=0){
//Logger.log("There are "+userdates.length+" previous dates for this user.");//DEBUG
}
else{
//Logger.log("There no previous dates for this user");//DEBUG
}
//Logger.log(userdates);
return userdates;
}
Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
<?!= include('Stylesheet'); ?>
</head>
<body>
<div class="demo" >
<h1>jQuery datepicker</h1>
<p>click here : <input type="text" name="date" id="datepicker" /></p>
</div>
<?!= include('JavaScript'); ?>
</body>
</html>
JavaScript.html
<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>
<script>
var userdates = ["12/13/2019","12/24/2019"];
$(function() {
$('#datepicker').datepicker({
minDate: "+3W",maxDate: "+12W",beforeShowDay: function (date) {
$thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
if ($.inArray($thisDate,userdates) == -1) {
return [true,""];
} else {
return [false,"","Unavailable"];
}
}
});
});
</script>