Using v-time-picker in ui-template, appears as size 0x0

Dashboard
1

I am trying to use v-time-picker in a ui-template. I looked at the first example on Time Picker Component — Vuetify.js and tried, in a ui-template

<template>
  <div>
    <v-checkbox v-model="landscape" label="Landscape"></v-checkbox>
    <v-time-picker v-model="picker" :landscape="landscape"></v-time-picker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        picker: null,
        landscape: false
      }
    }
  }
</script>

I specified 6x6 for the template size. In the dashboard I see the Landscape checkbox, and the space under it for the picker, but it is empty. Inspecting the DOM I can see it is there
<v-time-picker landscape="false"></v-time-picker>
but hovering over that pops up in the dashboard v-time-picker 0x0

I see from the docs that the width can be specified so set it to 290 but it made no difference.

Am I missing something?

2

Hello Colin .. the link you shared seems to be from an older version of Vuetify
From what i read on Github for Vuetify 3, they havent yet implemented the v-time-picker component
but someone has a PR for it (link) and its on the roadmap

3

It seems you are right, thanks. It looks like I will have to use the text-input node in time mode for the moment.
Thanks.

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.