如何根据下拉框值动态绑定/解绑Bootstrap Datepicker与文本框

看起来你踩了个常见的插件使用坑——用了错误的方式销毁Datepicker实例，才触发了这个jQuery类型错误。我来给你拆解问题和解决办法：

先分析报错原因 #

你看到的Uncaught TypeError: expr.replace is not a function，大概率是因为你尝试用jQuery的remove()或者其他不恰当的方法来解绑Datepicker，而非插件自带的销毁逻辑。jQuery在处理这类错误调用时，内部选择器处理流程出了问题，才抛出这个报错。

正确的动态绑定/解绑流程 #

Bootstrap Datepicker有自己的实例管理机制，不能直接用普通的jQuery DOM操作方法处理，正确步骤如下：

1. 绑定（初始化）Datepicker #

当需要启用日期选择器时，调用插件的初始化方法：

$('#yourDateInput').datepicker({
  // 自定义配置项，比如日期格式、自动关闭等
  format: 'yyyy-mm-dd',
  autoclose: true,
  todayHighlight: true
});

2. 解绑（销毁）Datepicker #

当需要关闭日期选择器时，必须使用插件提供的destroy方法，它会正确清理插件绑定的事件、生成的额外DOM元素：

$('#yourDateInput').datepicker('destroy');

完整的下拉框联动示例 #

给你写一个可直接运行的示例，完美匹配你的需求：

HTML代码 #

<select id="dateToggle">
  <option value="disable">关闭日期选择器</option>
  <option value="enable">启用日期选择器</option>
</select>
<input type="text" id="dateInput" placeholder="点击选择日期">

JavaScript代码 #

// 监听下拉框切换事件
$('#dateToggle').on('change', function() {
  const selectedVal = $(this).val();
  const $dateInput = $('#dateInput');
  
  // 先判断输入框是否已绑定Datepicker实例
  const hasDatepicker = $dateInput.data('datepicker') !== undefined;

  if (selectedVal === 'enable') {
    // 未绑定时才初始化，避免重复绑定导致的异常
    if (!hasDatepicker) {
      $dateInput.datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
      });
    }
  } else {
    // 已绑定时才销毁，避免调用不存在的方法
    if (hasDatepicker) {
      $dateInput.datepicker('destroy');
      // 可选：清空输入框内容
      $dateInput.val('');
    }
  }
});

额外注意事项 #

• 你使用的jQuery 1.9.1是比较老旧的版本，要确保搭配的Bootstrap Datepicker版本和它兼容，版本不匹配也可能引发这类奇怪的报错。
• 不要直接用$dateInput.remove()或$dateInput.off()来解绑，这些方法只会移除DOM元素或通用事件，无法清理Datepicker的专属实例和生成的节点，反而会触发错误。

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