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>