如何在Google Sheet侧边栏嵌入始终可见的静态Date Picker？

要实现日期选择器始终在表单顶部可见、无需点击触发，同时不影响其他字段填写与表单提交，可通过以下修改实现：

关键调整方向 #

• 新增固定容器承载日期选择器，替代默认的弹窗触发逻辑
• 配置Materialize Datepicker的container属性绑定自定义容器，关闭自动隐藏
• 初始化后强制打开选择器，同步选中日期到表单字段
• 适配侧边栏布局调整样式

修改后的完整代码 #

Code.gs #

function showUserForm() {
  var template = HtmlService.createTemplateFromFile("userform");
  var html = template.evaluate().setTitle("Data Input");
  SpreadsheetApp.getUi().showSidebar(html);
}

function appendData(data) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sh = ss.getSheetByName("Sheet2");
  var arrOut = [data.date, data.name, data.phone]; // 新增日期字段存储
  sh.appendRow(arrOut);
}

userform.html #

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
      /* 适配侧边栏的日期选择器样式 */
      #datepicker-container {
        margin: 10px 0;
        padding: 5px;
      }
      .datepicker-embed .datepicker {
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <!-- 嵌入日期选择器的固定容器 -->
        <div id="datepicker-container" class="datepicker-embed col s12"></div>
        
        <!-- 隐藏字段存储选中日期，用于提交 -->
        <input type="hidden" id="selectedDate">

        <div class="input-field col s12">
          <i class="material-icons prefix">account_circle</i>
          <input id="username" type="text" class="validate">
          <label for="username">Your Name</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">phone</i>
          <input id="tel" type="text" class="validate">
          <label for="tel">Telephone</label>
        </div>

        <div class="input-field col s12">  
          <button class="btn waves-effect waves-light" id="btn">Submit
            <i class="material-icons right">send</i>
          </button>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>    

    <script>
      var nameField = document.getElementById("username");
      var phoneField = document.getElementById("tel");
      var selectedDateField = document.getElementById("selectedDate");

      document.getElementById("btn").addEventListener("click",addRecord);
      
      // 创建隐藏的触发元素（Materialize Datepicker必须绑定input元素）
      var hiddenTrigger = document.createElement('input');
      hiddenTrigger.type = 'text';
      hiddenTrigger.style.display = 'none';
      document.body.appendChild(hiddenTrigger);

      // 初始化嵌入型日期选择器
      var datePickerInstance = M.Datepicker.init(hiddenTrigger,{
        showClearBtn:true,
        container: 'datepicker-container', // 指定自定义容器
        autoClose: false, // 禁止选择后自动关闭
        onOpen: function() {
          // 覆盖默认弹窗样式，转为静态显示
          this.el.parentElement.querySelector('.datepicker').classList.add('datepicker-embed');
        },
        onChange: function(date) {
          // 同步选中日期到隐藏字段
          selectedDateField.value = date ? date.toISOString().split('T')[0] : '';
        }
      });

      // 初始化后直接打开日期选择器
      datePickerInstance.open();

      function addRecord() {
        var data = {
          date: selectedDateField.value,
          name: nameField.value,
          phone: phoneField.value
        };

        google.script.run.appendData(data);
        nameField.value = "";
        phoneField.value = "";
        selectedDateField.value = "";

        M.toast({html: 'Record was updated.'})
      }
    </script>
  </body>
</html>

核心修改说明 #

1. 容器与样式：新增#datepicker-container作为选择器的固定承载容器，通过CSS覆盖Materialize默认的弹窗定位样式，让选择器静态嵌入表单。
2. 隐藏触发元素：由于Materialize Datepicker必须绑定到<input>元素，创建隐藏input作为触发源，避免干扰表单原有布局。
3. 初始化配置：设置container指向自定义容器，关闭autoClose确保选择器始终可见；通过onChange回调同步选中日期到隐藏字段，方便提交时获取。
4. 强制显示：初始化后调用open()方法，让选择器直接显示在表单顶部，无需用户点击触发。
5. 提交逻辑：更新appendData函数，新增日期字段的存储逻辑，确保提交数据包含选中的日期信息。

内容的提问来源于stack exchange，提问作者Z_Losonc