如何在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表单了。请注意，这只是一种实现方式，您可以根据自己的需求进行修改和调整。

如何在Google sheets中使用bootstrap datetime选择器和自定义HTML表单？

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐