如何在Google sheets中使用bootstrap datetime选择器和自定义HTML表单？
在Google Sheets中使用Bootstrap DateTime选择器和自定义HTML表单，您可以按照以下步骤进行操作：
- 打开Google Sheets并创建一个新的工作表。
- 在工作表中的某个单元格中，输入以下自定义HTML代码：
<input type="text" id="datetimepicker" class="form-control">- 在Google Sheets菜单栏中，选择“工具”>“脚本编辑器”。
- 在脚本编辑器中，输入以下Google Apps Script代码：
function onOpen() {
var sheet = SpreadsheetApp.getActiveSpreadsheet();
var menuEntries = [
{name: "选择日期时间", functionName: "showDateTimePicker"}
];
sheet.addMenu("自定义表单", menuEntries);
}
function showDateTimePicker() {
var htmlOutput = HtmlService.createHtmlOutputFromFile('datetimepicker')
.setWidth(300)
.setHeight(200);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, '选择日期时间');
}- 在脚本编辑器中，点击“文件”>“新建”>“HTML文件”。
- 将以下Bootstrap DateTime选择器的HTML代码粘贴到新创建的HTML文件中，并保存：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="input-group date" id="datetimepicker">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#datetimepicker').datetimepicker();
});
</script>
</body>
</html>- 返回到脚本编辑器，点击“发布”>“部署为网络应用”。
- 在部署为网络应用对话框中，选择“谁可以访问此应用”为“任何人，甚至匿名用户”。
- 点击“部署”并复制生成的应用程序URL。
- 关闭对话框并返回到Google Sheets工作表。
- 在菜单栏中，选择“自定义表单”>“选择日期时间”。
- 弹出的模态对话框将显示Bootstrap DateTime选择器，您可以在其中选择日期和时间。
- 选择日期和时间后，单击“确定”按钮。
- 选择的日期和时间将显示在Google Sheets工作表中的自定义HTML表单单元格中。
这样，您就可以在Google Sheets中使用Bootstrap DateTime选择器和自定义HTML表单了。请注意，这只是一种实现方式，您可以根据自己的需求进行修改和调整。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
