light-vue-timepicker

Simple timepicker for VUE.JS made with Bootstrap

• Dependencies
• Installation
• Usage
• Retrieve Data
• Props
• Example

Dependencies

• Vue.js. Required.
• Bootstrap (CSS). Required.
• Fontawesome. Optional. (https://fontawesome.com/)

Installing

Install with npm:

npm i light-vue-timepicker

Import 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>