vuetify3-time-range-picker

A time range picker based on Vuetify 3, made so users can easily pick a time interval.

Compatible with Vue 3 and Vuetify 3

If you are looking for the version 2 compatible package: check the previous version.

Installation

NPM

npm i vuetify3-time-range-picker

YARN

yarn add vuetify3-time-range-picker

Usage

Dependencies: Vue 3 and Vuetify 3

JavaScript

// main.js
import App from './App.vue'
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

createApp(App).use(createVuetify({})).mount('#app')

// Component.vue
import TimeRangePicker from 'vuetify3-time-range-picker';
import 'vuetify3-time-range-picker/dist/style.css'

export default {
  ...,
  components: {
    TimeRangePicker,
  },
};

HTML

<template>
  <v-app id="app">
    <time-range-picker
      v-model="time"
      variant="solo"
      step="30"
    />
  </v-app>
</template>

Props

Name	Type	Description	Default Value
modelValue	Object	An object used as v-model containing 'start', 'end' and 'duration'	{ start: '00:00', end: '23:59', duration: 1439 } (duration is in minutes)
inputLabel	String	Input label text	'Interval'
wholeDayLabel	String	Whole day checkbox label text	'Whole day'
step	String, Number	Interval of minutes between available times	15
disabledTimes	String, String[]	Times to be removed from options (e.g. ['00:00', '12:00'])	[]
innerDivCustomClass	String	Custom CSS classes to be added at input's wrapper	''
inline	Boolean	Applies the inline style	false
hideWholeDayCheckbox	Boolean	Hides whole day option (this becomes true if maxDuration is set)	false
maxDuration	Number	Max range duration (in minutes, 0 means no max)	0
allowNextDay	Boolean	Enables next day end time selection	false
nextDayLabel	String	Next day checkbox label	'Next day'

Besides you can also pass most of the v-select props.

Events

Name	Description
update:modelValue	Updates the v-model value
mouseover	Emitted at input mouseover
mouseleave	Emitted at input mouseleave
focus	Emitted at input focus
blur	Emitted at input blur

More Examples

Max duration

<time-range-picker
  v-model="range"
  variant="underlined"
  step="60"
  :max-duration="120"
  color="blue"
/>

Allow next day

<time-range-picker
  v-model="range"
  variant="filled"
  step="60"
  :max-duration="360"
  color="green"
  allow-next-day
/>

License

MIT