1.0.2 • Published 4 years ago
light-vue-timepicker v1.0.2
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>