Vue.js项目中如何用MDBootstrap实现点击日历图标唤起日期选择器？

我帮你排查了代码里的几个关键问题，这些应该就是导致日期选择器无法正常渲染的原因：

1. 组件标签拼写错误 #

你把结束标签写成了 <mdb-date-pickler>，多了一个字母"l"！正确的结束标签应该和开始标签一致：<mdb-date-picker>。这个低级错误会让Vue无法识别完整的组件，只能渲染基础的文本输入框。

2. Moment.js 调用方式错误 #

moment.format('YYYY-MM-DD') 写法不对，Moment是构造函数，必须先实例化当前时间再调用format方法：

moment().format('YYYY-MM-DD') // 注意括号()

3. Options 属性用法错误 #

MDB Date Picker的 options 属性是用来配置选择器的行为（比如禁用日期、显示格式、语言等），不是用来设置默认日期的。如果要默认选中今天，应该用 v-model 或者 value 绑定日期值。

修复后的完整代码示例（Vue 2 Options API） #

<template>
  <mdb-date-picker 
    icon="calendar" 
    far 
    v-model="selectedDate" 
    :options="pickerConfig"
  ></mdb-date-picker>
</template>

<script>
// 确保正确导入组件（根据你的MDB版本调整路径）
import { mdbDatePicker } from 'mdbvue';
import moment from 'moment';

export default {
  components: {
    mdbDatePicker
  },
  data() {
    return {
      selectedDate: moment().format('YYYY-MM-DD'), // 默认选中今天
      pickerConfig: {
        format: 'yyyy-mm-dd', // 配置日期显示格式
        // 可以添加其他配置，比如: minDate: '2024-01-01'
      }
    };
  }
};
</script>

Vue 3 Composition API 版本（新版MDB） #

<template>
  <mdb-date-picker 
    icon="calendar" 
    far 
    v-model="selectedDate" 
    :options="pickerConfig"
  ></mdb-date-picker>
</template>

<script setup>
import { ref } from 'vue';
import { MDBDatePicker } from 'mdb-vue-ui-kit';
import moment from 'moment';

const selectedDate = ref(moment().format('YYYY-MM-DD'));
const pickerConfig = ref({
  format: 'yyyy-mm-dd'
});
</script>

额外检查项 #

• 确认已经通过npm正确安装了MDBootstrap Vue依赖和Moment.js（或Day.js，新版MDB推荐使用Day.js）
• 确保组件已经在项目中全局注册，或者在当前组件中局部导入注册
• 如果使用新版MDB，可能需要将Moment替换为Day.js，写法类似：dayjs().format('YYYY-MM-DD')

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