Vuetify-time-range-picker NPM

vuetify-time-range-picker

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

Compatible with Vue 2 and Vuetify 2. If you need a Vue 3 and Vuetify 3 compatible version: check the upgraded version.

Demo

Installation

NPM

npm i vuetify-time-range-picker

YARN

yarn add vuetify-time-range-picker

Usage

Dependencies: Vue and Vuetify

JavaScript

// main.js
import Vue from 'vue';
import vuetify from '@/plugins/vuetify'; // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app');

// Component.vue
import TimeRangePicker from 'vuetify-time-range-picker';

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

HTML

<template>
  <v-app id="app">
    <time-range-picker
      v-model="range"
      full-width
      hide-details
      hide-selected
      outlined
      step="30"
    />
  </v-app>
</template>

Props

Name	Type	Description	Default Value
range	Object	An object used as v-model containing 'start' and 'end'	{ start: '00:00', end: '23:59' }
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
outerIcon	String	Outer vuetify v-icon default slot	'access_time'
outerIconColor	String	Outer vuetify v-icon color prop	''
startAppendIcon	String	Start time append icon	''
endAppendIcon	String	End time append icon	''
startPrefix	String	Start time prefix text	''
endPrefix	String	End time prefix text	''
disabledTimes	String, Array	Disabled times for both inputs	[]
innerDivCustomClass	String	Custom CSS classes to be added at input's wrapper	''
noInputSeparator	Boolean	Hides the separator between start and end input	false
hideWholeDayCheckbox	Boolean	Hides whole day option	false
hideOuterIcon	Boolean	Hides outer v-icon	false

Besides you can also pass most of the v-select props. The enabled ones are:

error-count error-messages full-width hide-details hint persistent-hint messages success-messages background-color color dark dense disable-lookup disabled eager error filled flat height hide-selected item-color light menu-props outlined rounded shaped solo solo-inverted success

Slots

Name	Description
append	Replaces the default v-icon outside the input

Events

Name	Description
update	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

License

MIT

vuetify vue time range picker time picker interval

@everything-registry/sub-chunk-3104

3 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago