Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vuetify3-time-range-picker

arthursb201625MIT1.0.2

A time range picker, made so users can easily pick a time interval.

vuetify, vue, vuetify 3, vue 3, time range picker, time picker, interval

readme

vuetify3-time-range-picker

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

Demo

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"
/>

Demo

Allow next day

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

Demo

License

MIT