light-vue-timepicker
Simple timepicker for VUE.JS made with Bootstrap
Dependencies
- Vue.js. Required.
- Bootstrap (CSS). Required.
- Fontawesome. Optional. (https://fontawesome.com/)
Installing
Install with npm:
npm i light-vue-timepickerImport globally in app.js:
import LightVueTimepicker from 'light-vue-timepicker';
Vue.component('light-vue-timepicker', LightVueTimepicker);
Usage
<light-vue-timepicker></light-vue-timepicker>Retrieve data
variable = {
yourVmodel.hour,
yourVmodel.minute,
yourVmodel.second,
yourVmodel.a
}Props
| Name | Type | Description | Default |
|---|---|---|---|
hourRange |
Array |
Range of hours which displayed (ex ['8-12', '14-19', '22']) | ['00-23'] |
minuteRange |
Array |
Range of minutes which displayed (ex ['0-30']) | ['00-59'] |
secondRange |
Array |
Range of secondes which displayed (ex ['0-30']) | ['00-59'] |
classe |
String |
class(boostrap or other) for input hour and minute | form-control col-5 |
format |
String |
Format 12 or 24 | 24 |
lang |
String |
lang fr or en | null (display HH MM) |
withHour |
Boolean |
Display input hour | true |
withMinute |
Boolean |
Display input minute | true |
withSecond |
Boolean |
Display input second | false |
Example
<light-vue-timepicker
v-model="time"
lang="en"
:hourRange="['8-12', '14-19', '21']"
:minuteRange="['30', '40', '55-57']"
:withSecond="true"
>
</light-vue-timepicker>