时间选择器未显示在 v-date-picker 中

发布于 2025-01-09 17:17:49 字数 857 浏览 1 评论 0 原文

我想在我的 vuetify 项目中的 vCalender 上使用 v-date-picker 选择时间范围。我为此使用 v-date-picker 。尽管我在 v-date-picker 中使用 dateTime 作为 mod，但没有地方可以选择时间。这只是日历。有什么想法我做错了吗？

我的模板

      <div>
              <div class="flex mb-2">
                <label class="text-gray-600 font-medium"><input class="mr-1" type="radio" value="" v-model="timezone" />Local</label>
                <label class="text-gray-600 font-medium ml-3"><input class="mr-1" type="radio" value="utc" v-model="timezone" />UTC</label>
              </div>
              <v-date-picker v-model="date" multiple :timezone="timezone" mode="dateTime" />
            </div>

我的数据：

date: new Date(),
timezone: '',

原文

I want to select a time range using v-date-picker on vCalender in my vuetify project. I use v-date-picker for this. Even though I use dateTime as the mod in v-date-picker, there is no place to select the time. It's just the calendar. Any ideas what I'm doing wrong?

my-template

      <div>
              <div class="flex mb-2">
                <label class="text-gray-600 font-medium"><input class="mr-1" type="radio" value="" v-model="timezone" />Local</label>
                <label class="text-gray-600 font-medium ml-3"><input class="mr-1" type="radio" value="utc" v-model="timezone" />UTC</label>
              </div>
              <v-date-picker v-model="date" multiple :timezone="timezone" mode="dateTime" />
            </div>

my data:

date: new Date(),
timezone: '',

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最美不过初阳 2025-01-16 17:17:49

编辑：

问题似乎是冲突，因为两个组件都被命名为v-date-picker，并且就目前情况而言，它正在选择Vuetify > 的组件作为默认组件。如果您希望在应用程序中同时使用两者，请检查此已解决的 Github 问题：

引用 Vcalendar 的所有者； nathanreyes< /a> 来自 Github 问题：

使用 VCalendar 时，您可以将 componentPrefix 作为选项传递。
Vue.use(VCalendar, {
  组件前缀：'vc'
})
然后在模板中使用时

<前><代码><模板>

下面的旧答案是在OP编辑问题以更好地反映问题之前。

v-date-picker API 用于模式。但是，有一个 type 选项，但它仅支持日期选择器的“date”或“month” “对于月份选择器。

您可以使用 Vuetify 的 vuetify-datetime-picker 扩展来代替，该扩展在答案中链接到这个问题。感谢@Jeanpaul1304。

EDIT:

The problem seems to be a conflict as both components are named v-date-picker, and as it stands, it is picking the Vuetify's component as the default. If you wish to use both in your application, check this resolved Github issue:

Quouting the owner of Vcalendar; nathanreyes from the Github issue:

You can pass componentPrefix as an option when using VCalendar.
Vue.use(VCalendar, {
  componentPrefix: 'vc'
})
Then when using in template
<template>
  <vc-calendar>
  </vc-calendar>
</template>

Old answer below is before the OP edited the question to better reflect the problem.

There is no option in the v-date-picker API for mode. However, there is a type option, but it only supports either "date" for date picker or "month" for month picker.

You could use vuetify-datetime-picker extension of Vuetify instead which was linked in an answer to this question. Thanks to @Jeanpaul1304.

回复收藏 0 原文

方圜几里 2025-01-16 17:17:49

    Vue.use(VCalendar, {
  componentPrefix: 'vc', // Now use vc-calendar and vc-date-picker
});

该代码无法运行，因为与 vuetify 存在混淆。为此，我们需要在主js中进行更改。所以我们需要使用vc-data-picker而不是v-data-picker。

    Vue.use(VCalendar, {
  componentPrefix: 'vc', // Now use vc-calendar and vc-date-picker
});

The code is not working because there is confusion with vuetify. For this, we need to make changes in main js. So we need to use vc-data-picker instead of v-data-picker.

回复收藏 0 原文

~没有更多了~