Vue.js中如何同时显示日期时间选择器与元素？组件不显示求助

看起来你漏掉了V-Calendar组件的注册步骤，这就是为什么v-date-picker没有渲染出来的原因。我来帮你修正代码并解释问题所在：

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Date Picker Demo</title>
</head>
<body>
<div id="app">
  <v-date-picker mode="dateTime" v-model='date'/>
  <p>lala</p>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/v-calendar"></script>
<script>
// 关键步骤：全局注册V-Calendar组件库
Vue.use(VCalendar);

new Vue({
  el: '#app',
  data: {
    date: new Date() // 默认选中当前日期时间
  }
})
</script>
</body>
</html>

核心问题解释 #

你之前的代码没有调用Vue.use(VCalendar)，这会导致Vue无法识别v-date-picker这个自定义组件——它本质上是V-Calendar库提供的组件，必须先通过Vue.use()完成注册，Vue才能正确解析并渲染它。

额外注意事项 #

• 如果你不想全局注册所有V-Calendar组件，也可以按需导入单个组件，但对于简单场景来说，全局注册是最便捷的方式。
• 遇到组件不显示的情况，建议先查看浏览器控制台，通常会有明确的错误提示（比如Unknown custom element: <v-date-picker>），能帮你快速定位问题。

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