An alternative time-picker using dropdowns instead of the MD time wheel
npm install vuetify-time-select
An alternative time-picker using dropdowns instead of the MD time "wheel".
Requires Vuetify - built using Vuetify Components
While Vuetify's TimePicker is an excellent component and conforms to the Material Design Specs, some users may find it confusing or cumbersome (especially on a desktop app). This component is provided as an alternative that still conforms to (other) MD specs and works within the Vuetify ecosystem.
See a working example here: https://codepen.io/fontzter/pen/GRRMqNa
From the root of a Vue project already using Vuetify:
``sh`
npm i -S vuetify-time-select
Or if using yarn
`sh`
yarn add vuetify-time-select
If you want the component to be registered and available globally, from your main Vue configuration file (frequently src/main.js), add the following before instantiating Vue for the first time:
`js
import Vue from 'vue'
import VuetifyTimeSelect from 'vuetify-time-select'
Vue.component('vuetify-time-select', VuetifyTimeSelect)
`
Or if you just want to use the vuetify-time-select component within another component:
`vue`
`vue
`
| string | null | no | Apply a color to the Time Select (simply extends Vuetify's color prop) |
| label | string | null | no | Label that appears above the time select |
| minuteGroups | array | [0, 15, 30, 45] | no | The minutes that will always show in the dropdown. (An elipsis will be added to access minutes between them) |
| value | string | null | yes | the time value used by the time select (expects and returns HH:MM` in 24hr format) |Comments, questions, pull requests, and bug reports are very welcome. Please submit an issue via the Issues tab above.