vuetify-time-range-picker

Similar to v-time-picker, this components allows you to visually select time ranges.

Demo Video

Installation

npm i --save @moirei/vuetify-time-range-picker
# or yarn add @moirei/vuetify-time-range-picker

Usage

<template>
  <v-time-range-picker v-model="time"/>
</template>

Component

import { VTimeRangePicker } from '@moirei/vuetify-time-range-picker'

export default {
  components: { VTimeRangePicker },
  data: () => ({
    time: null,
  })
}

Plugin

import Vue from 'vue'
import VTimeRangePicker from '@moirei/vuetify-time-range-picker'
Vue.use(VTimeRangePicker)

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

export default Vue.extend({
  data: () => ({
    time: null,
  })
})

API

props

| Name | Required? | Default | Type | Description | | -------------- | --------- | ------- | --------- | ------------------------------------------------------------------------------------ | | value | yes | | string | The v-model input prop | | allowed-hours | no | | function/array | Restricts which hours can be selected | | allowed-minutes | no | | function/array | Restricts which minutes can be selected | | allowed-seconds | no | | function/array | Restricts which seconds can be selected | | ampm-in-title | no | false | boolean | Place AM/PM switch in title, not near the clock. | | color | no | | string | Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). | | dark | no | false | boolean | Applies the dark theme variant to the component. | | elevation | no | | string/number | Designates an elevation applied to the component between 0 and 24. | | format | no | 24hr | string | Defines the format of a time displayed in picker. Available options are ampm and 24hr.| | header-color | no | | string | Defines the header color. If not specified it will use the color defined by color prop or the default picker color.| | height | no | | string/number | Sets the height for the component. | | landscape | no | false | boolean | Orients picker horizontal. | | light | no | false | boolean | Applies the light theme variant to the component. | | max-height | no | | string/number | Sets the maximum height for the component. | | max-width | no | | string/number | Sets the maximum width for the component. | | min-height | no | | string/number | Sets the minimum height for the component. | | min-width | no | | string/number | Sets the minimum width for the component. | | no-title | no | false | boolean | Hide the picker title. | | outlined | no | false | boolean | Removes elevation (box-shadow) and adds a thin border. | | readonly | no | false | boolean | Puts picker in readonly state. | | rounded | no | false | boolean | Designates the border-radius applied to the component. | | shaped | no | false | boolean | Applies a large border radius on the top left and bottom right of the card. | | scrollable | no | false | boolean | Allows changing hour/minute with mouse scroll. | | tag | no | div | string | Specify a custom tag used on the root element. | | tile | no | false | boolean | Removes the component’s border-radius. | | use-seconds | no | false | boolean | Toggles the use of seconds in picker. | | width | no | | string/number | Sets the width for the component. |

events

| Name | Description | | -------------- | ------------------------------------------------- | | input | The v-model input event |

classes

| Name | Description | | ------------------------- | --------------------------------------- | | v-time-range | The components class |

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Changelog

Please see CHANGELOG.

Credits

• Augustus Okoye

License

MIT