Bootstrap Datepicker与Vue的v-model绑定失效问题求助

我之前也踩过这个坑！问题出在Bootstrap Datepicker是基于jQuery的第三方插件，它在选择日期后直接修改了输入框的DOM值，但不会触发Vue依赖的input事件——而v-model正是通过监听input事件来同步数据的，这就导致手动输入有效，但插件选择日期时Vue完全感知不到变化。

下面给你两种实用的解决方案：

方案1：直接监听Datepicker的changeDate事件 #

这是最直接的办法，在初始化Datepicker的时候，绑定它自带的changeDate事件，手动把选中的日期同步到Vue数据里：

HTML代码 #

<div class="position-relative has-icon-left">
  <input v-model="user.date_of_birth" placeholder="dd/mm/yyyy" id="date-of-birth" class="form-control datepicker" name="date">
  {{ user.date_of_birth }}
</div>

Vue脚本代码 #

mounted() {
  // 初始化Datepicker
  $('#date-of-birth').datepicker({
    format: 'dd/mm/yyyy', // 必须和你的输入框格式匹配
    autoclose: true, // 选完日期自动关闭面板，提升体验
    todayHighlight: true // 高亮显示今天日期
  }).on('changeDate', (event) => {
    // 把选中的日期格式化成指定格式，同步到Vue数据
    this.user.date_of_birth = event.format('dd/mm/yyyy');
  });
}

方案2：封装Vue自定义指令（适合多场景复用） #

如果你的项目里多个页面都要用Datepicker，写个自定义指令能避免重复代码，让逻辑更优雅：

定义自定义指令 #

// 如果是Vue 2
Vue.directive('datepicker', {
  inserted(el, binding) {
    // 初始化Datepicker，支持通过指令传格式参数
    const format = binding.value?.format || 'dd/mm/yyyy';
    $(el).datepicker({
      format,
      autoclose: true
    }).on('changeDate', (event) => {
      // 手动触发input事件，让v-model能监听到变化
      el.value = event.format(format);
      el.dispatchEvent(new Event('input'));
    });
  },
  unbind(el) {
    // 组件销毁时清理Datepicker实例和事件，防止内存泄漏
    $(el).datepicker('destroy').off('changeDate');
  }
});

// 如果是Vue 3
app.directive('datepicker', {
  mounted(el, binding) {
    const format = binding.value?.format || 'dd/mm/yyyy';
    $(el).datepicker({
      format,
      autoclose: true
    }).on('changeDate', (event) => {
      el.value = event.format(format);
      el.dispatchEvent(new Event('input'));
    });
  },
  unmounted(el) {
    $(el).datepicker('destroy').off('changeDate');
  }
});

使用自定义指令 #

<!-- 基础用法 -->
<input v-datepicker v-model="user.date_of_birth" placeholder="dd/mm/yyyy" id="date-of-birth" class="form-control" name="date">

<!-- 自定义格式（比如yyyy-mm-dd） -->
<input v-datepicker="{ format: 'yyyy-mm-dd' }" v-model="user.date_of_birth" placeholder="yyyy-mm-dd" class="form-control" name="date">

额外注意事项 #

• 确保脚本引入顺序正确：先引入jQuery，再引入Bootstrap，最后引入Bootstrap Datepicker的JS文件，不然插件会初始化失败。
• 格式设置要统一：Datepicker的format参数要和你期望的输入格式、Vue数据格式一致，避免出现日期格式混乱的问题。

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