Vuetify — Time Picker Customization

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Time Picker Width

We can set the width of a time picker with the width prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" type="month" width="290" class="ml-4"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

The width is in pixels.

Also, we can add the full-width prop to make the time picker full width:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" :landscape="$vuetify.breakpoint.mdAndUp" full-width type="month"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

We can set it to landscape mode at the breakpoint we want so that the header will be displayed as the sidebar.

Time Picker’s Elevation

A time picker can have a shadow below it.

We can add the flat prop to remove the shadow:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" flat></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Or we can add the elevation prop to add our shadow:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" elevation="15"></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

The value is between 0 to 24.

AM/PM Switch in Title

We can add the ampm-in-title prop to add the AM and PM text into the header.

For example, we can write:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" ampm-in-title></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

This way, we can choose an AM or PM time.

No Title

We can remove the title bar with the no-title prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="time" no-title></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Time Picker With Seconds

A time picker can let us choose the seconds.

To do that, we add the use-seconds prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="picker" use-seconds></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Now we can pick the seconds.

Scrollable Time Picker

We can make the time values scrollable with the scrollable prop:

<template>  
  <v-row justify="space-around">  
    <v-time-picker v-model="picker" scrollable></v-time-picker>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    time: "11:15",  
  }),  
};  
</script>

Now we pick our time values by scrolling with the scroll wheel.

Range

The time value range can be restricted with the min and max props:

<template>  
  <v-row justify="space-around" align="center">  
    <v-col style="width: 290px; flex: 0 1 auto;">  
      <h2>Start:</h2>  
      <v-time-picker v-model="start" :max="end"></v-time-picker>  
    </v-col>  
    <v-col style="width: 290px; flex: 0 1 auto;">  
      <h2>End:</h2>  
      <v-time-picker v-model="end" :min="start"></v-time-picker>  
    </v-col>  
  </v-row>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    start: null,  
    end: null,  
  }),  
};  
</script>

We have the max prop to set the maximum time we can choose.

And the min prop sets a minimum time restriction.

Conclusion

We can customize time pickers in many ways.