如何在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表单了。请注意，这只是一种实现方式，您可以根据自己的需求进行修改和调整。
相关·内容
1回答
如何在Google sheets中使用bootstrap datetime选择器和自定义HTML表单？
javascript、html、google-apps-script、google-sheets、momentjs
我用bootstrap datetime选择器制作了定制的HTML表单<!doctype html> <head> <link rel="stylesheet" href="https://stackpath.bootstra
浏览 14提问于2020-05-22得票数 0
2回答
Bootstrap 4日期时间选择器日期格式更改
bootstrap-4、datetimepicker、datetime-format
我使用bootstrap 4最新版本来开发我的php web应用程序，我使用html 5 "date“输入来在html表单中输入日期。Bootstrap 4总是在日期输入字段中显示mm/dd/yyyy格式的日期。我需要将其更改为yyyy-mm-dd。如何在bootstrap 4日期选择器中将默认日期格式更改为我自己的格式？
浏览 7提问于2018-06-17得票数 1
1回答
从自定义指令内部调用angular UI Bootstrap指令
javascript、angularjs、directive、angular-bootstrap
目前，我正在做一个非常扩展的表单，在HTML上使用输入，文本，日期选择器等，它会使代码看起来非常丑陋，也很难阅读。问题是我已经创建了返回适当HTML元素的自定义指令，例如：<suggest-input data-ng-model="EDCtrl.headerStep.provider.identificationrestrict: 'E',
require: 'ngModel&#x
浏览 4提问于2017-02-12得票数 1
1回答
用于创建特定输入列表的自动表格
google-drive-api
我正在尝试创建一个Google电子表格，随着表格的开始，一个弹出窗口会出现一个问题，它是一个条目或拾取。在成功批准后，它应该填写在收件部分的列表中。我的问题是，是否有可能使用</
浏览 2提问于2019-11-08得票数 0
3回答
如何在自定义表单域上激活日期选择器小工具？
python、flask、datepicker、flask-admin
例如，当我添加自定义ModelView时： pass
base_template='admin/mymaster.html')flaskadmin.add_views(Task
浏览 5提问于2016-05-26得票数 0
1回答
在ASP.NET核心视图中以日期时间格式获取日期和小时
datetime、asp.net-core
我想要一个用户只挑选Date和Hour没有分钟部分在日期时间在视图中。我试过了，但微小的部分总是显示和可拾取的！任何不显示微小部件或禁用它的解决方案都是可以接受的。这是我在视图模型中写的： DataFormatString= "{0:yyyy-MM-dd HH}")]
浏览 2提问于2020-06-01得票数 0
2回答
WordPress自定义表单中的验证码
php、html、wordpress、captcha
我在WordPress网站上有自定义表单。跟踪ip地址，检查推荐人页面，验证电子邮件地址。仍在接收垃圾邮件订阅。尝试Bestwebsoft验证码，非常简单的验证码，但不能防止垃圾邮件。有什么帮助吗？
浏览 53提问于2016-09-28得票数 0
回答已采纳
1回答
使用Simple_form、引导和Rails 4选择DateTime样式
ruby-on-rails、twitter-bootstrap、datetime、simple-form
我正在尝试使用Bootstrap css框架对simple_form生成的datetime选择进行样式设置，但我就是找不到一个解决方案来解决这个问题。我能找到的是集成bootstrap日期时间选择器的各种方法，但是对于这个项目来说，选择是很好的，不需要额外的js和格式化等等。以下是默认情况下selects的渲染方式：html：我希望有选择以内联显示，通常我会这样做与css (浮动:左)等，但有像"--“和":
浏览 2提问于2015-03-21得票数 2
1回答
自定义MasterPage类停止使用Bootstrap 5
c#、asp.net、webforms、bootstrap-5
我有一个Asp.net WebForm应用程序，并且我正在使用MasterPages。我的MasterPage代码隐藏类继承自自定义类，该自定义类继承自MasterPage基类。这个自定义的母版页类维护不同的值，包括用户状态，它在我的母版页上使用，如下所示，{ %>
// Load我对DOM进行了检查和调查，根据UserState显示和隐藏的父
浏览 1提问于2021-04-19得票数 0
1回答
基于ASP.NET MVC的数据选择器
asp.net-mvc、datetime、datetimepicker
")]public DateTime(model => model.DateAndTimeOfPerformance, null, new { @class = "text-danger" })如您所见，我使用Bootstrap：
现场基准和<
浏览 3提问于2016-04-29得票数 0
2回答
清除datetime-通过JS在Opera中输入
jquery、html、opera
我想使用新的HTML5表单输入类型，比如datetime，另外还提供一个按钮来插入当前日期和时间，以及第二个按钮来清除输入。所有这些在上都运行得很好。但是Opera提供了一个非常特殊的datetime输入，我无法清除它，它使用$(inputElement).val('');清空该值(使用jQuery)。虽然这适用于最近版本的Chromium (它有一个更简单的日期时间选择器)和Firefox (它
浏览 1提问于2011-10-24得票数 0
回答已采纳
4回答
如何减少未使用的css文件？
javascript、html、css
我正在使用bootstrap来构建一个移动网页 只有一个页面，并使用一些引导css和js代码，但我必须持有所有的css和js。由于我只使用其中的一部分，我想减少未使用的css样式和js代码，以减小文件大小。 该怎么做呢？我的意思是，如果我只使用bootstrap的模式，如何减少col和alert以及其他我不使用的css的css？
浏览 63提问于2019-08-31得票数 2
2回答
Google脚本在收集表单响应和移动到另一个工作表方面的问题
google-sheets、google-apps-script、google-forms
我一直试图拼凑一些代码在工作中使用谷歌表，我有一些问题，我可以找到与我目前的知识水平。我正在尝试创建一个脚本，该脚本将收集表单的响应，将它们移动到单独工作表的最后一行，然后清除该行。1, 1); s.deleteRow(row);}
此代码仅在手动更改列A中的数据时起作用，但在通过表单响应提交数据时不起作用。
浏览 0提问于2019-08-10得票数 1
回答已采纳
1回答
我可以使用什么language+libraries来解析CSV/Google文件，然后使用一些已解析的信息发送文本消息？
python、java、software-development、automation、csv
消息之间唯一的区别是开头的名称和目标电话号码，这将直接来自CSV文件或Google。我很乐意使用的语言(按顺序排列)：Python一些新的，不太难拿的东西
最终目标是点击几个按钮(将Google转换为CSV，添加到文件夹，运行.cmd命令)，然后在5
浏览 0提问于2019-08-13得票数 1
3回答
Rails 4:告诉simple_form使用输入类型"date“，而不是像Rails 4的f.date_field那样显示不同的复选框？
ruby-on-rails-4、simple-form
当我使用简单的表单时，它会显示列类型date的三个不同的复选框。相反，我希望简单的表单像HTML5那样显示日期属性。具体来说，我需要简单的表单来执行以下操作：为此，我试过：如何告诉简单表单和Rails 4使用输入类型"date&q
浏览 1提问于2014-07-20得票数 1
回答已采纳
1回答
Microsoft Edge - MVC应用程序中的引导日期选择器不再显示
asp.net-mvc、microsoft-edge、bootstrap-datepicker
它只显示mm/dd/yyyy和一个日历图标(选择器)。当我查看源时，我会看到以下内容：日期将显示为04/24/2017和日历图标(选择)。据我所读(可能是误解)，Microsoft有它自己的数据报警器，所以我想知道该数
浏览 2提问于2021-08-11得票数 0
2回答
Symfony 4-无法转换属性路径“[myDateTime]”的值:预期的\DateTimeInterface
php、forms、symfony、symfony-forms、symfony4
我想使用Symfony表单来呈现日期选择器。由于日期时间选择器只需要一个输入文本(因为它返回一个简单的字符串)，所以我决定使用表单DataTransformers将数据从日期时间转换为字符串，反之亦然。，我使用了存储在form /form s.html.twig中的表单主题：
{% use "bootstrap_4_layout.html.twig"
浏览 0提问于2018-09-14得票数 0
回答已采纳
1回答
Rails中的Design&Bootstrap复选框:如何修复左边框的自动设置：-20 of？
css、ruby-on-rails、twitter-bootstrap、devise
我正在使用Bootstrap (使用Ruby2.0.0和Rails 4.0)对设计登录表单(app/ Devise /session/new.html.erb)进行样式化，并将复选框设置为“记住我”，如下所示<%= f.check_box :remember_me %> </div>但不管出于什么
浏览 2提问于2014-06-26得票数 2
回答已采纳
2回答
初始化角2中的第三方库
angular
DOCTYPE html><head><script>tinymce.init</textarea></html>
问题是:如何使用角2编程调用库的init方法？
浏览 0提问于2016-04-28得票数 1
回答已采纳
3回答
在Google Sheets自定义函数中抛出自定义异常和错误消息？
javascript、google-apps-script、google-sheets、try-catch、google-sheets-custom-function
在Google Sheets (如Excel等)中，如果用户在公式中输入了错误的输入，错误代码将打印在有问题的单元格中，并弹出一个小窗口，提供有关错误的更多详细信息。‘在单元格中打印，弹出窗口说明该值需要等于或大于0。
我如何在Google Sheets中用一个自定义函数来复制它呢？抛出异常通常是有效的。例如，如果我捕捉到一个超出范围的输入值，然后抛出一个自定义异常"#E
浏览 2提问于2014-10-02得票数 8
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
