Vue Time Picker
A dropdown time picker (hour|minute|second) for Vue.js (1.x), with flexible time format support
🎉 The brand new version for Vue 2.x is up!
Please check vue2-timepicker for your Vue 2.x project
Demo
You can see the vue-timepicker
in action in the Demo Page
Dependencies
Vue.js 1.x (>=v1.0.21 <2.0.0)
Installation
Through NPM (recommended)
npm install vue-time-picker --save
Bower
bower install vue-timepicker --save
Get Started
Step 1: Import VueTimepicker
A. Include with modules
// import // Or, requirevar VueTimepicker =
B. Include with <script>
and <style>
Just put the vue-timepicker.min.js
(or vue-timepicker.js
) script block after Vue itself
// Don't forget to call thisVue
Step 2: Include VueTimepicker in your component
var yourComponent = components: VueTimepicker ...
Step 3: Then, you can introduce the vue-timepicker
tag anywhere you like in your component's template
Usage
Basic Usage
<!-- Default to 24-Hour format HH:mm -->
Customized Time Format
<!-- Show seconds picker --> <!-- 12-hour format, with AM/PM picker --> <!-- 12-hour format, with seconds picker and am/pm picker -->
VueTimepicker will recognizes the following tokens in the format string
Section | Token | Output |
---|---|---|
AM/PM | A | AM PM |
| a | am pm
Hour | H | 0 1 ... 22 23 | HH | 00 01 ... 22 23 | h | 1 2 ... 11 12 | hh | 01 02 ... 11 12 | k | 1 2 ... 23 24 | kk | 01 02 ... 23 24 Minute | m | 0 1 ... 58 59 | mm | 00 01 ... 58 59 Second | s | 0 1 ... 58 59 | ss | 00 01 ... 58 59
If not set,
format
string will be default to "HH:mm"
Customized Picker interval
<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 --> <!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 --> <!-- Bind interval config with your own data variable -->
Note: Please do remember to add the :
or v-bind:
sign before the interval properties
Hide Clear Button
Initalise Time Picker Value
// e.g. If you want to assign "10:05:00" as the initial value of vue-timepickervar yourComponent = components: VueTimepicker { return yourTimeValue: HH: "10" mm: "05" ss: "00" ... } ...
<!-- HTML -->
Get Time Picker's Current Value
Method 1: Read the two-way synced time-value
variable
<!-- In the last section, we've set the initial value (yourTimeValue) to "10:05:00" -->
// Then, open the dropdown picker and pick a new time.// Like setting to "14:30:15" for example// Check the value after thatconsole// outputs -> {HH: "14", mm: "30", ss: "15"}
Method 2: Listen to the vue-timepicker-update
event
// 1) Use `events`var yourComponent = components: VueTimepicker events: { // `eventData` includes the current value of vue-timepicker // Add your handler here } ... ... // Or, 2) Use `$on`this
Unlike the sync time-value
, which only returns tokens you provided in the initial data (HH
, mm
and ss
in the above case), the vue-timepicker-update
event will return all time format.
In the example above, when picker is set to "14:30:15" in HH:mm:ss format, vue-timepicker-update
will return the following data:
// `vue-timepicker-update` event data HH: "14" H: "14" hh: "14" a: "am" A: "AM" h: "14" kk: "14" k: "14" m: "30" mm: "30" s: "15" ss: "15"
Whereas the time-value
will only return data with your predefined tokens
// Previously defined tokens in `yourTimeValue` are `HH`, `mm` and `ss`// Hence, `time-value`'s synced data returns: HH: "14" mm: "30" ss: "15"
Method 3: Add @change
event handler
<!-- A: No argument --> <!-- B: Custom arguments -->
// A: No argument { console // -> {data: {HH:..., mm:... }}} // B: Custom arguments { console // -> [{data: {HH:..., mm:... }}] console // -> 'foo' console // -> 'bar'}
Props API
Prop | Type | Required | Default Value |
---|---|---|---|
format | String | no | "HH:mm" |
minute-interval | Number | no | undefined |
second-interval | Number | no | undefined |
time-value | Object | no | undefined |
hide-clear-button | Boolean | no | false |
Contribution
Please feel free to fork and help developing.
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev
For detailed explanation on how things work, checkout the webpack guide and docs for vue-loader.
Change Log
Detail changes for each release are documented in CHANGELOG.md