vue2-timepicker
Advanced tools
A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support
💡 Dead repo recharged in 2019 🔋
A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support.
You can see the Vue2 Timepicker in action in the Demo Page
Please check MIGRATION.md for basic guidelines if you are about to:
v0.1.x -> v0.2.0+)
yarn add vue2-timepicker
npm install vue2-timepicker --save
NOTE: We stop Bower support from
0.2.0+, please check MIGRATION.md for migration guidelines.
// Main JS (in UMD format)
import VueTimepicker from 'vue2-timepicker'
// CSS
import 'vue2-timepicker/dist/VueTimepicker.css'
Javascript
// CommonJS
import VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'
// UMD
import VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'
// UMD Minified
import VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'
CSS
@import 'vue2-timepicker/dist/VueTimepicker.css';
/* Or, with node_module alias path like: */
@import '~vue2-timepicker/dist/VueTimepicker.css';
/*
NOTE: the path alias to `node_modules` differs between bundlers.
Please change the `~` to any alias that works with your environment.
*/
Single File Component
// The *.vue file with CSS included
import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'
// NOTE: In some cases, it requires additional workarounds in the bundler's config
// Import the *.vue file (CSS included)
import VueTimepicker from 'vue2-timepicker/sfc'
// Note the `/sfc` suffix here
var yourComponent = new Vue({
components: { VueTimepicker },
...
})
vue-timepicker in your component's templateThen, you can introduce the vue-timepicker tag anywhere you like in your component's template
<vue-timepicker></vue-timepicker>
<!-- Default to 24-Hour format HH:mm -->
<vue-timepicker></vue-timepicker>
<!-- Show seconds picker -->
<vue-timepicker format="HH:mm:ss"></vue-timepicker>
<!-- 12-hour format, with AM/PM picker -->
<vue-timepicker format="hh:mm A"></vue-timepicker>
<!-- 12-hour format, with seconds picker and am/pm picker -->
<vue-timepicker format="hh:mm:ss a"></vue-timepicker>
VueTimepicker 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, the
formatstring is default to "HH:mm"
<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->
<vue-timepicker :minute-interval="5"></vue-timepicker>
<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->
<vue-timepicker :second-interval="10"></vue-timepicker>
<!-- Bind interval config with your own data variable -->
<vue-timepicker :minute-interval="yourMinuteInterval"></vue-timepicker>
v-modelFrom v1.0.0+, timepicker's v-model accepts value in both Object (default) and String format. The v0.x versions only support Object form.
For example, if you want to set "10:05:00" ("HH:mm:ss" format) as the initial value of vue-timepicker:
const yourComponent = new Vue({
components: { VueTimepicker },
data () {
return {
// Object form
yourTimeValue: {
HH: '10',
mm: '05',
ss: '00'
},
// String form
yourStringTimeValue: '10:05:00',
...
}
},
...
})
Both forms lead to the same result.
<!-- Object form -->
<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss"></vue-timepicker>
<!-- String form -->
<vue-timepicker v-model="yourStringTimeValue" format="HH:mm:ss"></vue-timepicker>
When the initial value is completely unknown:
data () {
return {
// Will be rendered as Object form
yourEmptyValue: {},
emptyValueToo: undefined,
emptyValueAsWell: null,
// Will be taken into String form
yourEmptyStringValue: ''
}
}
For instance, if you want to set the initial hour value to 8 pm and leave the rest slots empty:
data () {
return {
// OBJECT FORM
// Default 24-Hour
timeValue: {
HH: '20',
mm: ''
},
// 12-Hour with seconds
timeValueWithSec: {
h: '8',
mm: '',
ss: '',
A: 'PM'
},
// STRING FORM
// Default 24-Hour + String value
stringTimeValue: '20:mm',
// 12-Hour with seconds + String value
stringTimeValueWithSec: '8:mm:ss PM'
}
}
<!-- OBJECT FORM -->
<!-- Default 24-Hour -->
<vue-timepicker v-model="timeValue"></vue-timepicker>
<!-- 12-Hour with seconds -->
<vue-timepicker v-model="timeValueWithSec" format="h:mm:ss A"></vue-timepicker>
<!-- STRING FORM -->
<!-- Default 24-Hour + String value -->
<vue-timepicker v-model="stringTimeValue"></vue-timepicker>
<!-- 12-Hour with seconds + String value -->
<vue-timepicker v-model="stringTimeValueWithSec" format="h:mm:ss A"></vue-timepicker>
v-modelYou can either read the binding v-model value anytime or add a handler to deal with the input event from vue-timepicker.
<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss" @input="inputHandler"></vue-timepicker>
{
data () {
return {
yourTimeValue: {
HH: '10',
mm: '05',
ss: '00'
},
...
}
},
methods: {
inputHandler (eventData) {
console.log(eventData)
}
}
}
In this case, we set the initial value (yourTimeValue) to "10:05:00". Then, open the dropdown picker and pick a new time, like setting it to "14:30:15" for example.
// In `inputHandler`:
// console.log outputs -> {HH: "14", mm: "30", ss: "15"}
change Event<!-- A: No argument -->
<vue-timepicker v-model="yourTimeValue" @change="changeHandler"></vue-timepicker>
<!-- B: Custom arguments -->
<vue-timepicker v-model="yourTimeValue" @change="otherChangeHandler($event, 'foo', 42)"></vue-timepicker>
// A: No argument
changeHandler (eventData) {
console.log(eventData)
// -> {data: {HH:..., mm:... }, displayTime: "HH:mm"}
}
// B: Custom arguments
otherChangeHandler (eventData, yourArg1, yourArg2) {
console.log(eventData)
// -> {data: {HH:..., mm:... }, displayTime: "HH:mm"}
console.log(yourArg1)
// -> 'foo'
console.log(yourArg2)
// -> 42
}
Unlike v-model and input event, which only return the defined time tokens you provided in the binding variable, the change event delivers all supported formats.
In the example above, after the user set values to "14:30:15" in the picker, change event returns the following data:
// `@change` event data
{
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"
},
// extra `displayTime` added since v0.2.2
displayTime: "14:30:15"
}
Whereas the v-model / input only return the data with defined tokens
// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}
// Hence, the `v-model` returns:
{
HH: "14",
mm: "30",
ss: "15"
}
<vue-timepicker hide-clear-button></vue-timepicker>
Enable to hide the "×" clear button on the right-hand side. Users can still pick new values from the dropdown, but they cannot erase any selected data.
<vue-timepicker disabled></vue-timepicker>
Fully disable both dropdown picker and the "×" clear button in the UI, to prevent users from changing any values again.
Automatically close the dropdown when the user finishes selecting all of the required fields.
<vue-timepicker close-on-complete></vue-timepicker>
Sometimes you may want to limit hours picker to a specific range. The hour-range parameter is here to help.
<!-- 24-Hour Format -->
<vue-timepicker :hour-range="[5, [8, 12], [14, 17], 19]"></vue-timepicker>
<!-- >> Equals to :hour-range="[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]" -->
<!-- 12-Hour Format -->
<vue-timepicker :hour-range="['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']" format="hh:mm a">
<!-- >> Equals to :hour-range="['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']" -->
Similar to hour-range, you can determine values in the minutes and seconds dropdown by using minute-range and second-range.
<!-- Minute range -->
<vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]"></vue-timepicker>
<!-- >> Active Items: 00, 06, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->
<!-- Second range -->
<vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]"></vue-timepicker>
<!-- >> Active Items: 0, 6, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->
When implemented together with minute-interval and second-interval, the customized intervals take the priority.
<!-- Minute range + 5-minute interval -->
<vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]" :minute-interval="5"></vue-timepicker>
<!-- >> Active Items: 00, 10, 15, 20, 25, 30, 50 -->
<!-- Second range + 10-second interval-->
<vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]" :second-interval="10"></vue-timepicker>
<!-- >> Active Items: 0, 10, 20, 30, 50 -->
There're four kinds of helper properties to let you hide the values excluded by hour-range, minute-range, and second-range.
<!-- `hide-disabled-hours` sample -->
<vue-timepicker :hour-range="[5, [8, 12], [14, 17], 19]" hide-disabled-hours></vue-timepicker>
Here we take the hide-disabled-hours as an example. It's a pair with the hour-range parameter. In this case, the hour picker hides the invalid hours (0, 1, 2, 3, 4, 6, 7, 13, 18, 20, 21, 22, 23) and display the valid hours (5, 8, 9, ...) only.
Basic keyboard support includes:
Advance Keyboard support (enabled with advanced-keyboard):
<vue-timepicker advanced-keyboard></vue-timepicker>
Please be aware that after putting the advanced-keyboard on, hundreds of additional keyboard event listeners are going to be attached to the component. The amount of listeners depends on how many hours, minutes, and seconds value you enabled in the current Timepicker.
<!-- Unit: million second -->
<vue-timepicker :blur-delay="300"></vue-timepicker>
Sets the blur delay time for keyboard navigation. Defaults to 200 if not set.
<vue-timepicker debug-mode></vue-timepicker>
It's aimed to help developers to investigate the input -> output process. When debug mode is toggled on, you can see extra DEBUG: ... logs coming through the console window as you interact with the vue-timepicker.
Let's create a "bug" here as an example --
<!-- Manual Bug Sample: Define timepicker with format "h:mm:ss A" -->
<vue-timepicker v-model="yourStringValue" format="h:mm:ss A" debug-mode></vue-timepicker>
{
data () {
return {
// Manual Bug Sample:
// Should be '3:mm:05 A' but oops.. the finger slipped
yourStringValue: 'e:mm:05 A'
}
}
}
Then, in the console window, you should see a debug log saying:
DEBUG: The input string in "v-model" does NOT match the "format" pattern
format: h:mm:ss A
v-model: e:mm:05 A
| Prop | Type | Required | Default Value |
|---|---|---|---|
| v-model | Object, String | no | undefined |
| format | String | no | "HH:mm" |
| minute-interval | Number | no | undefined |
| second-interval | Number | no | undefined |
| hide-clear-button | Boolean | no | false |
| disabled | Boolean | no | false |
| close-on-complete | Boolean | no | false |
| hour-range | Array | no | undefined |
| minute-range | Array | no | undefined |
| second-range | Array | no | undefined |
| hide-disabled-hours | Boolean | no | false |
| hide-disabled-minutes | Boolean | no | false |
| hide-disabled-seconds | Boolean | no | false |
| hide-disabled-items | Boolean | no | false |
| advanced-keyboard | Boolean | no | false |
| blur-delay | Number | no | 200 |
| debug-mode | Boolean | no | false |
| Prop | Type | Required | Default Value |
|---|---|---|---|
| id | String | no | undefined |
| name | String | no | undefined |
| placeholder | String | no | undefined |
| tabindex | Number | no | 0 |
| input-class | String | no | undefined |
Timepicker now supports id, name, placeholder, and tabindex like common form elements. These values are assigned to the
<input type="text" class="display-time"> within the component.
id, name and tabindex<!-- id -->
<vue-timepicker id="myFirstPicker"></vue-timepicker>
<!-- name -->
<vue-timepicker name="nameInForm"></vue-timepicker>
<!-- tabindex -->
<vue-timepicker :tabindex="5"></vue-timepicker>
placeholderWhen placeholder is undefined, timepicker takes the determined format string instead.
<!-- placeholder is set -->
<vue-timepicker placeholder="Start Time"></vue-timepicker>
<!-- -> "Start Time" -->
<!-- placeholder not set -->
<vue-timepicker format="hh:mm A"></vue-timepicker>
<!-- -> "hh:mm A" -->
<!-- both placeholder and format are not set -->
<vue-timepicker></vue-timepicker>
<!-- -> "HH:mm" -->
input-classThe input-class is assigned to the text input within the component as well.
<!-- Set your own `input-class` in the Vue template -->
<vue-timepicker input-class="my-awesome-picker"></vue-timepicker>
<!-- HTML result -->
<span class="vue__time-picker time-picker">
<input class="display-time my-awesome-picker" type="text" readonly="readonly">
<!-- ... -->
</span>
| Event | Arguments | Description |
|---|---|---|
| input | (value) | Emit after value changes |
| change | (eventData) | Emit after value changes |
| open | Emit when the dropdown opens | |
| close | Emit when the dropdown closes |
open and close Event of the Dropdown PickerHelp to identify the current status of the dropdown picker
// Define a variable for logging the status
data () {
return {
dropdownStatus: 'closed'
}
}
<p>Dropdown Status: I'm {{dropdownStatus}}!</p>
<vue-timepicker @open="dropdownStatus = 'opened'" @close="dropdownStatus = 'closed'"></vue-timepicker>
Please feel free to fork and help developing. Check CONTRIBUTING.md for more details.
Detail changes of each release: CHANGELOG.md
v 1.0.0
⚠️ IMPORTANT: The default import source in v1.0.0+ is different from the v0.x versions.
From v1.0.0+, CSS is excluded from the main source. Please import the CSS file separately.
// v1.0.0+
//
import VueTimepicker from 'vue2-timepicker'
// -> Imports JS file in UMD form
// CSS
import 'vue2-timepicker/dist/VueTimepicker.css'
Comparing to:
// While in the v0.x versions
import VueTimepicker from 'vue2-timepicker'
// -> Imports the *.vue Single File Component together with CSS
Please check the Documentation for more available import formats.
v-model.minute-range and second-range support. Companioned with hide-disabled-minutes and hide-disabled-seconds.hide-disabled-items property for hiding all excluded items (hour, minute and seconds) at a time.close-on-complete for automatically close the dropdown when the user finishes selecting all of the required fields.advanced-keyboard support for Arrow Keys navigation and Space/Enter key selection.tabindex property support, which will be assigned to the <input type="text"> within the component.debug-mode to help developers investigating the input -> output process.Added ES "module" and other version fields in package.json to resolving more loader issues. (Thanks to @Trainmaster)
When hour-range is set in a 12-hour format Timepicker, recheck the selected hour's validity after user switching "AM/PM" from the dropdown.
FAQs
A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support
The npm package vue2-timepicker receives a total of 12,154 weekly downloads. As such, vue2-timepicker popularity was classified as popular.
We found that vue2-timepicker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.