Materialize Datepicker绑定聊天输入框选完日期如何恢复输入功能

• 开发聊天机器人过程中，需要在特定交互节点引导用户选择日期，当前已通过如下代码为类名为.usrInput的输入元素初始化Materialize Datepicker组件：

var elems = document.querySelector(".usrInput");
var currYear = (new Date()).getFullYear();
var options = {
    defaultDate: new Date(currYear - 1, 1, 31),
    maxDate: new Date(currYear + 1, 12, 31),
    yearRange: [currYear - 1, currYear + 1],
    format: "yyyy/mm/dd"
};
var instances = M.Datepicker.init(elems, options);

• 核心需求：用户完成日期选择后，解除Datepicker组件对输入元素的绑定，恢复元素原本支持自由输入普通文本的交互能力，保证后续对话流程正常进行。
• 配套测试用极简HTML结构：

<html>
  <head>
    <title>chatbot</title>
    <!-- 引入materialize.css -->
    <link
      rel="stylesheet"
      type="text/css"
      href="static/css/materialize.min.css"
    />
  </head>
  <body>
    <div class="container">
      <div class="widget">
        <div class="chat_header">
          <span class="chat_header_title">Chatbot name</span>
        </div>
        <!-- 聊天内容展示区域 -->
        <div class="chats" id="chats">
          <div class="clearfix"></div>
        </div>
        <div class="keypad">
          <textarea
            id="userInput"
            placeholder="Type something..."
            class="usrInput"
          ></textarea>
          <div id="sendButton">
            <i class="fa fa-paper-plane" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

• 开发者为Materialize框架和JavaScript初学者，需要可直接复用的实现方案。

核心实现逻辑 #

Materialize Datepicker 内置destroy方法，调用后会完全移除组件对绑定元素的所有事件监听、注入的临时样式，让元素恢复到初始化之前的原生交互状态。

落地步骤 #

• 给Datepicker配置补充onClose回调：该回调会在用户选中日期、日期弹窗关闭时自动触发，覆盖选完日期关弹窗、手动点击弹窗外部关闭两种场景。
• 在回调中调用组件实例的destroy方法，解除组件绑定。
• 可选：手动将输入框占位符调整回默认的对话输入提示，匹配普通文本输入场景的交互预期。

可复用代码示例 #

var elems = document.querySelector(".usrInput");
var currYear = (new Date()).getFullYear();
// 提前定义变量存储组件实例引用，方便后续调用内置方法
let datepickerInstance;

var options = {
    defaultDate: new Date(currYear - 1, 1, 31),
    maxDate: new Date(currYear + 1, 12, 31),
    yearRange: [currYear - 1, currYear + 1],
    format: "yyyy/mm/dd",
    onClose: () => {
        // 若实例不存在直接跳过，避免重复销毁报错
        if (!datepickerInstance) return;
        // 完全销毁Datepicker绑定，恢复输入框原生可编辑能力
        datepickerInstance.destroy();
        // 清空实例引用，降低内存泄漏风险
        datepickerInstance = null;
        // 可选：恢复输入框默认占位提示
        elems.placeholder = "Type something...";
    }
};

// 初始化后将实例赋值给提前定义的变量
datepickerInstance = M.Datepicker.init(elems, options);

注意事项 #

• 若后续对话流程需要再次弹出日期选择器，只需要用相同配置重新调用M.Datepicker.init方法绑定元素即可，不需要额外做兼容处理。
• 不要通过手动移除类名、解绑部分事件的方式替代destroy方法，容易残留组件注入的内联样式，导致输入框交互异常。

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