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