1.0.0 • Published 3 years ago
@moirei/vuetify-time-range-picker v1.0.0
vuetify-time-range-picker
Similar to v-time-picker, this components allows you to visually select time ranges.
Installation
npm i --save @moirei/vuetify-time-range-picker
# or yarn add @moirei/vuetify-time-range-pickerUsage
<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
License
1.0.0
3 years ago