{"_id":"vue2-timepicker","_rev":"55-caa43e1d5decd54ba963ff312c250352","name":"vue2-timepicker","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","dist-tags":{"latest":"1.1.6","beta":"1.1.0-beta.2"},"versions":{"0.1.0":{"name":"vue2-timepicker","version":"0.1.0","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"node build/dev-server.js","demo":"node build/demo.js","lint":"eslint --ext .js,.vue src"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"dependencies":{"vue":"^2.0.1"},"devDependencies":{"autoprefixer":"^6.4.0","babel-core":"^6.10.4","babel-eslint":"^7.0.0","babel-loader":"^6.0.0","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","connect-history-api-fallback":"^1.1.0","css-loader":"^0.25.0","eslint":"^3.7.1","eslint-config-standard":"^6.1.0","eslint-friendly-formatter":"^2.0.5","eslint-loader":"^1.5.0","eslint-plugin-html":"^1.3.0","eslint-plugin-promise":"^2.0.1","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.9.0","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.17.2","json-loader":"^0.5.4","node-sass":"^3.10.1","opn":"^4.0.2","ora":"^0.3.0","sass-loader":"^4.0.2","shelljs":"^0.7.4","url-loader":"^0.5.7","vue-hot-reload-api":"^2.0.6","vue-html-loader":"^1.2.3","vue-loader":"^9.4.0","vue-style-loader":"^1.0.0","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.3","webpack-hot-middleware":"^2.12.2","webpack-merge":"^0.14.1"},"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","main":"index.js","gitHead":"b35a5eae808bb312b4744b1f577b5a487f347905","_id":"vue2-timepicker@0.1.0","_shasum":"b6990ff28edda09081b98557f0633785c8ebcdb8","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.0","_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"dist":{"shasum":"b6990ff28edda09081b98557f0633785c8ebcdb8","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.1.0.tgz","integrity":"sha512-M1MlHF0wPJB+7Y1TcTESxY9QVy2r+JsQOeRRe56h3j500U8sQeQVeWshMnKbdqSiqkSuKABvyqE0ouwZbRLo0A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeVbO3tkMLl0y7f4wtoBZnevUWDTOI1qlmGgIbTI2ENgIgVH5nIW0n+tDXAE5G6m/Exjpaz7xbgceYgR1Q5uzcw/c="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/vue2-timepicker-0.1.0.tgz_1477679596144_0.06577691785059869"},"directories":{},"deprecated":"Critical bug fixed and bundler updated in ^v0.2.0"},"0.1.1":{"name":"vue2-timepicker","version":"0.1.1","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"node build/dev-server.js","demo":"node build/demo.js","lint":"eslint --ext .js,.vue src"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"dependencies":{"vue":"^2.0.1"},"devDependencies":{"autoprefixer":"^6.4.0","babel-core":"^6.10.4","babel-eslint":"^7.0.0","babel-loader":"^6.0.0","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","connect-history-api-fallback":"^1.1.0","css-loader":"^0.25.0","eslint":"^3.7.1","eslint-config-standard":"^6.1.0","eslint-friendly-formatter":"^2.0.5","eslint-loader":"^1.5.0","eslint-plugin-html":"^1.3.0","eslint-plugin-promise":"^2.0.1","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.9.0","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.17.2","json-loader":"^0.5.4","node-sass":"^3.10.1","opn":"^4.0.2","ora":"^0.3.0","sass-loader":"^4.0.2","shelljs":"^0.7.4","url-loader":"^0.5.7","vue-hot-reload-api":"^2.0.6","vue-html-loader":"^1.2.3","vue-loader":"^9.4.0","vue-style-loader":"^1.0.0","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.3","webpack-hot-middleware":"^2.12.2","webpack-merge":"^0.14.1"},"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","main":"index.js","gitHead":"5ea221ae6c9974611269c51abd6e7981c6f07d2d","_id":"vue2-timepicker@0.1.1","_shasum":"dbe621f7aaa85953e1ab3c0c622117fd4a429cf8","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.0","_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"dist":{"shasum":"dbe621f7aaa85953e1ab3c0c622117fd4a429cf8","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.1.1.tgz","integrity":"sha512-GGg9dktTizEuEvDvYlYXOpKZR7EOC9iiAelLh/CY3J1YPpKYe1QTcXTo+p9wMmjqxWdU6nOlpvhNb1jjQquvgg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpJb/+FN4GHZSu8U26dP4eZs82aWnDLAUnsT42fu0ETAiBLNd/UgJPuySHTDMu00/yXKTZ8WLPCRbO6Bd2CY4rTeA=="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/vue2-timepicker-0.1.1.tgz_1477751559103_0.34597511659376323"},"directories":{},"deprecated":"Critical bug fixed and bundler updated in ^v0.2.0"},"0.1.2":{"name":"vue2-timepicker","version":"0.1.2","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"node build/dev-server.js","demo":"node build/demo.js","minify":"node build/minify.js","lint":"eslint --ext .js,.vue src"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"dependencies":{"vue":"^2.0.1"},"devDependencies":{"autoprefixer":"^6.4.0","babel-core":"^6.10.4","babel-eslint":"^7.0.0","babel-loader":"^6.0.0","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","connect-history-api-fallback":"^1.1.0","css-loader":"^0.25.0","eslint":"^3.7.1","eslint-config-standard":"^6.1.0","eslint-friendly-formatter":"^2.0.5","eslint-loader":"^1.5.0","eslint-plugin-html":"^1.3.0","eslint-plugin-promise":"^2.0.1","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.9.0","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.17.2","json-loader":"^0.5.4","node-sass":"^3.10.1","opn":"^4.0.2","ora":"^0.3.0","sass-loader":"^4.0.2","shelljs":"^0.7.4","url-loader":"^0.5.7","vue-hot-reload-api":"^2.0.6","vue-html-loader":"^1.2.3","vue-loader":"^9.4.0","vue-style-loader":"^1.0.0","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.3","webpack-hot-middleware":"^2.12.2","webpack-merge":"^0.14.1"},"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","main":"index.js","gitHead":"7108ce6050c987494e9264996a86bf7a87099527","_id":"vue2-timepicker@0.1.2","_shasum":"9cabfd672477c43171d3ac44bf0a546b3df87727","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.0","_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"dist":{"shasum":"9cabfd672477c43171d3ac44bf0a546b3df87727","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.1.2.tgz","integrity":"sha512-jXt7K26d+x9K9sK4oQIBsZgBcGLeWZ+poykTjLTk/kgXtyxYlDvpNm35E/ibqYU+paSc9XIRF37829RVJ6V4uA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICry2Ou2e+7JmpADoKX5G/ZN9BLBNPZEILbK54o+d1EoAiBLVw3hG2IznIKUZeuCPBkOd2RLY+OfEKj1MbdRUHew3w=="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/vue2-timepicker-0.1.2.tgz_1478327204647_0.6496103543322533"},"directories":{},"deprecated":"Critical bug fixed and bundler updated in ^v0.2.0"},"0.1.3":{"name":"vue2-timepicker","version":"0.1.3","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"node build/dev-server.js","demo":"node build/demo.js","minify":"node build/minify.js","lint":"eslint --ext .js,.vue src"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"dependencies":{"vue":"^2.0.1"},"devDependencies":{"autoprefixer":"^6.4.0","babel-core":"^6.10.4","babel-eslint":"^7.0.0","babel-loader":"^6.0.0","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","connect-history-api-fallback":"^1.1.0","css-loader":"^0.25.0","eslint":"^3.7.1","eslint-config-standard":"^6.1.0","eslint-friendly-formatter":"^2.0.5","eslint-loader":"^1.5.0","eslint-plugin-html":"^1.3.0","eslint-plugin-promise":"^2.0.1","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.9.0","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.17.2","json-loader":"^0.5.4","node-sass":"^3.10.1","opn":"^4.0.2","ora":"^0.3.0","sass-loader":"^4.0.2","shelljs":"^0.7.4","url-loader":"^0.5.7","vue-hot-reload-api":"^2.0.6","vue-html-loader":"^1.2.3","vue-loader":"^9.4.0","vue-style-loader":"^1.0.0","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.3","webpack-hot-middleware":"^2.12.2","webpack-merge":"^0.14.1"},"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","main":"index.js","gitHead":"c8756e0ff9b29094034db3b17bb69c8648de2608","_id":"vue2-timepicker@0.1.3","_shasum":"39cf27f14d14ba4a219346d4161449fab4e30019","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.0","_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"dist":{"shasum":"39cf27f14d14ba4a219346d4161449fab4e30019","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.1.3.tgz","integrity":"sha512-fSChhOEcdl2piV1I/ISKw7abIAoeyppicJ5IWf2E/k55g/8480WdVI5dItrzhHai+x/2sBGH2Orqlqtue5HGJw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6u6wldJ8+sg8f9sYIrWgta/Vd6ULlnkzDstQIvWIcBwIgJEwW4A3j2B0vTTi73FWiQ2MqT9ySyxY4l3McU4DHVuM="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/vue2-timepicker-0.1.3.tgz_1478621735007_0.6546050112228841"},"directories":{},"deprecated":"Critical bug fixed and bundler updated in ^v0.2.0"},"0.1.4":{"name":"vue2-timepicker","version":"0.1.4","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"node build/dev-server.js","demo":"node build/demo.js","minify":"node build/minify.js","lint":"eslint --ext .js,.vue src"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"dependencies":{"vue":"^2.0.1"},"devDependencies":{"autoprefixer":"^6.4.0","babel-core":"^6.10.4","babel-eslint":"^7.0.0","babel-loader":"^6.0.0","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","connect-history-api-fallback":"^1.1.0","css-loader":"^0.25.0","eslint":"^3.7.1","eslint-config-standard":"^6.1.0","eslint-friendly-formatter":"^2.0.5","eslint-loader":"^1.5.0","eslint-plugin-html":"^1.3.0","eslint-plugin-promise":"^2.0.1","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.9.0","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.17.2","json-loader":"^0.5.4","node-sass":"^3.10.1","opn":"^4.0.2","ora":"^0.3.0","sass-loader":"^4.0.2","shelljs":"^0.7.4","url-loader":"^0.5.7","vue-hot-reload-api":"^2.0.6","vue-html-loader":"^1.2.3","vue-loader":"^9.4.0","vue-style-loader":"^1.0.0","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.3","webpack-hot-middleware":"^2.12.2","webpack-merge":"^0.14.1"},"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","main":"index.js","gitHead":"34e1fe54103e94ced4641ff1448ae742b53d795b","_id":"vue2-timepicker@0.1.4","_shasum":"0809d9b07e9c8642de360044b6a14c2b7f203815","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.0","_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"dist":{"shasum":"0809d9b07e9c8642de360044b6a14c2b7f203815","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.1.4.tgz","integrity":"sha512-XtnUwrCzs/8ojrDho8sglDA99MWMfu97el6Ur6TM4eFOPAdgO9JBySNzQH8dEH7vfKC7Uc8/FXG0fGQTJewcJA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGt4JehTHJcWR908gVcOUrtx7dqJBn1NkCaSNDtcMGL4AiEAkCaXjwHF74HHvzvAUPOt2YPEa8qHNDudYp4MXn4q3sQ="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/vue2-timepicker-0.1.4.tgz_1478871642109_0.8216611340176314"},"directories":{},"deprecated":"Critical bug fixed and bundler updated in ^v0.2.0"},"0.2.0-beta.0":{"name":"vue2-timepicker","version":"0.2.0-beta.0","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"build":"vue-cli-service build --target wc --name vue-timepicker 'src/components/VueTimepicker.vue'"},"main":"dist/vue-timepicker.min.js","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"dependencies":{"vue":"^2.6.10"},"devDependencies":{"@vue/cli-plugin-babel":"^3.9.0","@vue/cli-plugin-eslint":"^3.9.0","@vue/cli-service":"^3.9.0","babel-eslint":"^10.0.1","core-js":"^2.6.5","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue-template-compiler":"^2.6.10"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","readme":"# Vue2 Time Picker\n\nA dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.\n\n> Looking for the Vue 1.x version? Please check the [vue-timepicker](https://github.com/phoenixwong/vue-timepicker) *(Vue 1.x supported)*\n\n## Demo\n\nYou can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)\n\n## Migration\n\nMigrating from the Vue 1.x version? Please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines.\n\n## Dependencies\n\n[Vue.js](http://vuejs.org/) v2.0+\n\n## Installation\n\nThrough NPM **(Recommended)**\n\n```bash\nnpm install vue2-timepicker --save\n```\n\nBower\n\n```bash\nbower install vue2-timepicker --save\n```\n\n## Get Started\n\n**Step 1:** Import VueTimepicker\n\n**A**: Include the single file component **(Recommended)**\n\n```javascript\n// import\nimport VueTimepicker from 'vue2-timepicker'\n\n// Or, require\nvar VueTimepicker = require('vue2-timepicker')\n\n```\n\nor, **B**: Include distribution files with `<script>` and `<style>`\n\n```html\n<script src=\"yourpath/vue/dist/vue.min.js\"></script>\n<script src=\"yourpath/vue2-timepicker/dist/vue2-timepicker.min.js\"></script>\n\n<link href=\"yourpath/vue2-timepicker/dist/vue2-timepicker.min.css\" rel=\"stylesheet\"></link>\n```\n\n**NOTE:** When using the `dist` files, a `Vue.use()` call is needed\n\n```javascript\n// Work with <script> block\nVue.use(window.VueTimepicker)\n\n// Else\nVue.use(VueTimepicker)\n```\n\n**Step 2**: Include VueTimepicker in your component\n\n```javascript\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  ...\n})\n```\n\n**Step 3**: Then, you can introduce the `vue-timepicker` tag anywhere you like in your component's template\n\n```html\n<vue-timepicker></vue-timepicker>\n```\n\n## Usage\n\n### Basic Usage\n\n```html\n<!-- Default to 24-Hour format HH:mm -->\n<vue-timepicker></vue-timepicker>\n```\n\n### Customized Time Format\n\n```html\n<!-- Show seconds picker -->\n<vue-timepicker format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- 12-hour format, with AM/PM picker -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n\n<!-- 12-hour format, with seconds picker and am/pm picker -->\n<vue-timepicker format=\"hh:mm:ss a\"></vue-timepicker>\n```\n\nVueTimepicker will recognizes the following tokens in the format string\n\nSection    | Token | Output\n---------- | ----- | ---------------\n**AM/PM**  | A     | AM PM\n           | a     | am pm\n**Hour**   | H     | 0 1 ... 22 23\n           | HH    | 00 01 ... 22 23\n           | h     | 1 2 ... 11 12\n           | hh    | 01 02 ... 11 12\n           | k     | 1 2 ... 23 24\n           | kk    | 01 02 ... 23 24\n**Minute** | m     | 0 1 ... 58 59\n           | mm    | 00 01 ... 58 59\n**Second** | s     | 0 1 ... 58 59\n           | ss    | 00 01 ... 58 59\n\n> If not set, `format` string will be default to \"HH:mm\"\n\n### Customized Picker interval\n\n```html\n<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->\n<vue-timepicker :minute-interval=\"5\"></vue-timepicker>\n\n<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->\n<vue-timepicker :second-interval=\"10\"></vue-timepicker>\n\n<!-- Bind interval config with your own data variable -->\n<vue-timepicker :minute-interval=\"yourMinuteInterval\"></vue-timepicker>\n```\n\n**Note:** Please do remember to add the `:` or `v-bind:` sign before the interval properties\n\n### Hide Clear Button\n\n```html\n<vue-timepicker hide-clear-button></vue-timepicker>\n```\n\n### Bind Value with `v-model`\n\n```javascript\n// e.g. If you want to assign \"10:05:00\" as the initial value of vue-timepicker\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  data: function () {\n    return {\n      yourTimeValue: {\n        HH: \"10\",\n        mm: \"05\",\n        ss: \"00\"\n      },\n      ...\n    }\n  },\n  ...\n})\n```\n\n```html\n<!-- HTML -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n### Get Time Picker's Current Value\n\n#### **Method 1:** Read value from `v-model`\n\n```html\n<!-- In the last section, we've set the initial value (yourTimeValue) to \"10:05:00\" -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n```javascript\n// Then, open the dropdown picker and pick a new time.\n// Like setting to \"14:30:15\" for example\n// Check the value after that\nconsole.log(this.yourTimeValue)\n// outputs -> {HH: \"14\", mm: \"30\", ss: \"15\"}\n```\n\n#### **Method 2:** Add `@change` event handler\n\n```html\n<!-- A: No argument -->\n<vue-timepicker :time-value.sync=\"yourTimeValue\" @change=\"changeHandler\"></vue-timepicker>\n\n<!-- B: Custom arguments -->\n<vue-timepicker :time-value.sync=\"yourTimeValue\" @change=\"otherChangeHandler($event, 'foo', 'bar')\"></vue-timepicker>\n```\n\n```javascript\n// A: No argument\nchangeHandler (eventData) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }}\n}\n\n// B: Custom arguments\notherChangeHandler (eventData, yourArg1, yourArg2) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }}\n  console.log(yourArg1)\n  // -> 'foo'\n  console.log(yourArg2)\n  // -> 'bar'\n}\n```\n\nUnlike `v-model`, which only returns the defined time tokens you provided in the binding variable, the `change` event will return **all** supported formats.\n\nIn the example above, when picker is set to \"14:30:15\" in HH:mm:ss format, `change` event will return the following data:\n\n```javascript\n// `@change` event data\n{\n  HH: \"14\",\n  H: \"14\",\n  hh: \"14\",\n  a: \"am\",\n  A: \"AM\",\n  h: \"14\",\n  kk: \"14\",\n  k: \"14\",\n  m: \"30\",\n  mm: \"30\",\n  s: \"15\",\n  ss: \"15\"\n}\n```\n\nWhereas the `v-model` will only return the data with defined tokens\n\n```javascript\n// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}\n// Hence, the `v-model` returns:\n{\n  HH: \"14\",\n  mm: \"30\",\n  ss: \"15\"\n}\n```\n\n## Props API\n\nProp                  | Type      | Required | Default Value\n--------------------- | --------- | -------- | -------------\n**v-model**           | _Object_  | no       | _undefined_\n**format**            | _String_  | no       | \"HH:mm\"\n**minute-interval**   | _Number_  | no       | _undefined_\n**second-interval**   | _Number_  | no       | _undefined_\n**hide-clear-button** | _Boolean_ | no       | false\n\n## Contribution\n\nPlease feel free to fork and help developing.\n\n```bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n```\n\nFor detailed explanation on how things work, checkout the [webpack guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n\n## Change Log\n\nDetail changes for each release are documented in [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","readmeFilename":"README.md","gitHead":"e5c182287d5b7789ce6403296841e6c9fa27a1f5","_id":"vue2-timepicker@0.2.0-beta.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-BlqcbGfmCYeW5llggJr+dZsr5wSvJgNPoYMC06dsbxmOOpjMuw5dDP4Q1ji7LU3icDKLHrPVOPGFSF+e9cxKTw==","shasum":"9e69d877486c158558b4ae20e158ff15c097774b","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.2.0-beta.0.tgz","fileCount":39,"unpackedSize":495745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSFxZCRA9TVsSAnZWagAAHJwP/if5Oou9Uw3lqojpRu1C\nJTsFjUjVFUwWPzOd3SEl9zMMb8OGc4z2ruMkq6utKieU9sPyEARYshAgQCoK\neoKolQjH+UdsvJMqDRgKy5+1g/HMVKW4V/eTNMb4vetEcW3KQimxAW4ZNhxl\nNIvc3boeI3/IuDTAXrb5g3SqQ7PEKYtdW2U8nL83v2PGMDU5EsgsRdcLPXYV\nXlxmW4msUVt1lRzrUHcWopCOhYcC5L5aJAZxHlYspWRBsclMubPB75tiGJtg\nRWmaBI91zhRUFuBnXfVjgoT4KUaOW1wChZxiClnRzPr3ak+sDIXd/r7INYqH\nzVIH/1XD0q3SnB+MnA81df04rZ6r10rgNAaX3Y7F/COtYSEU7ddWES5x2jvP\nLDE0q2fUofT9MzENCRgLaOICH+Bzagg5sExnchyP9lx/A4AQvK+VnJCZ4VMh\nSQoaa+xecWkdLmDpfgMF+zo4jg7Gohl3cvH+yZfvX6buLRyeMJVMexx2IQlq\n52bLZ+CCXecofxOrcsq1POu4imcAKTF1b9c04NRwgtWObP9Pbi0/cFum7O6m\nb0XDN+8NUCIOqvJUViqjOKDZuko3ChSCu5O2TF3wE680lcPQQDfQenJk/0J4\n6DQzfF9zOnc2oKVe1+c6prypGZthR7o80rDcAn5ZlOKB9i93x7S0l21tXOUK\nk/CO\r\n=LYuG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIwGVaXn5FcDhaJ6CzTm/SzcNjBG5vgYAlp5ulS2D1IAiBAehtT7e/SMdhVEpkKcIRnsAIq7rbhOXKUeuFJ6stbMg=="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_0.2.0-beta.0_1565023319607_0.08696756485000079"},"_hasShrinkwrap":false,"deprecated":"test flght version deprecated"},"0.2.0-beta.2":{"name":"vue2-timepicker","version":"0.2.0-beta.2","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js"},"main":"dist/VueTimepicker.common.js","css":"dist/VueTimepicker.css","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.9.0","@vue/cli-plugin-eslint":"^3.9.0","@vue/cli-service":"^3.9.0","babel-eslint":"^10.0.1","core-js":"^2.6.5","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","readme":"# Vue2 Time Picker\n\nA dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.\n\n## Demo\n\nYou can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)\n\n## Migration\n\nMigrating from the Vue 1.x version? Please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines.\n\n## Dependencies\n\n[Vue.js](http://vuejs.org/) v2.6.5+\n\n## Installation\n\nThrough YARN or NPM **(Recommended)**\n\n```bash\nyarn add vue2-timepicker\n```\n\n```bash\nnpm install vue2-timepicker --save\n```\n\nBower\n\n```bash\nbower install vue2-timepicker --save\n```\n\n## Get Started\n\n**Step 1:** Import VueTimepicker\n\n```javascript\n// JS\nimport VueTimepicker from 'vue2-timepicker'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n```\n\n**Step 2**: Include VueTimepicker in your component\n\n```javascript\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  ...\n})\n```\n\n**Step 3**: Then, you can introduce the `vue-timepicker` tag anywhere you like in your component's template\n\n```html\n<vue-timepicker></vue-timepicker>\n```\n\n## Usage\n\n### Basic Usage\n\n```html\n<!-- Default to 24-Hour format HH:mm -->\n<vue-timepicker></vue-timepicker>\n```\n\n### Customized Time Format\n\n```html\n<!-- Show seconds picker -->\n<vue-timepicker format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- 12-hour format, with AM/PM picker -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n\n<!-- 12-hour format, with seconds picker and am/pm picker -->\n<vue-timepicker format=\"hh:mm:ss a\"></vue-timepicker>\n```\n\nVueTimepicker will recognizes the following tokens in the format string\n\nSection    | Token | Output\n---------- | ----- | ---------------\n**AM/PM**  | A     | AM PM\n&nbsp;     | a     | am pm\n**Hour**   | H     | 0 1 ... 22 23\n&nbsp;     | HH    | 00 01 ... 22 23\n&nbsp;     | h     | 1 2 ... 11 12\n&nbsp;     | hh    | 01 02 ... 11 12\n&nbsp;     | k     | 1 2 ... 23 24\n&nbsp;     | kk    | 01 02 ... 23 24\n**Minute** | m     | 0 1 ... 58 59\n&nbsp;     | mm    | 00 01 ... 58 59\n**Second** | s     | 0 1 ... 58 59\n&nbsp;     | ss    | 00 01 ... 58 59\n\n> If not set, `format` string will be default to \"HH:mm\"\n\n### Customized Picker interval\n\n```html\n<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->\n<vue-timepicker :minute-interval=\"5\"></vue-timepicker>\n\n<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->\n<vue-timepicker :second-interval=\"10\"></vue-timepicker>\n\n<!-- Bind interval config with your own data variable -->\n<vue-timepicker :minute-interval=\"yourMinuteInterval\"></vue-timepicker>\n```\n\n**Note:** Please do remember to add the `:` or `v-bind:` sign before the interval properties\n\n### Hide Clear Button\n\n```html\n<vue-timepicker hide-clear-button></vue-timepicker>\n```\n\n### Bind Value with `v-model`\n\n```javascript\n// e.g. If you want to assign \"10:05:00\" as the initial value of vue-timepicker\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  data: function () {\n    return {\n      yourTimeValue: {\n        HH: \"10\",\n        mm: \"05\",\n        ss: \"00\"\n      },\n      ...\n    }\n  },\n  ...\n})\n```\n\n```html\n<!-- HTML -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n### Get Time Picker's Current Value\n\n#### **Method 1:** Read value from `v-model`\n\n```html\n<!-- In the last section, we've set the initial value (yourTimeValue) to \"10:05:00\" -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n```javascript\n// Then, open the dropdown picker and pick a new time.\n// Like setting to \"14:30:15\" for example\n// Check the value after that\nconsole.log(this.yourTimeValue)\n// outputs -> {HH: \"14\", mm: \"30\", ss: \"15\"}\n```\n\n#### **Method 2:** Add `@change` event handler\n\n```html\n<!-- A: No argument -->\n<vue-timepicker :time-value.sync=\"yourTimeValue\" @change=\"changeHandler\"></vue-timepicker>\n\n<!-- B: Custom arguments -->\n<vue-timepicker :time-value.sync=\"yourTimeValue\" @change=\"otherChangeHandler($event, 'foo', 'bar')\"></vue-timepicker>\n```\n\n```javascript\n// A: No argument\nchangeHandler (eventData) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }}\n}\n\n// B: Custom arguments\notherChangeHandler (eventData, yourArg1, yourArg2) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }}\n  console.log(yourArg1)\n  // -> 'foo'\n  console.log(yourArg2)\n  // -> 'bar'\n}\n```\n\nUnlike `v-model`, which only returns the defined time tokens you provided in the binding variable, the `change` event will return **all** supported formats.\n\nIn the example above, when picker is set to \"14:30:15\" in HH:mm:ss format, `change` event will return the following data:\n\n```javascript\n// `@change` event data\n{\n  HH: \"14\",\n  H: \"14\",\n  hh: \"14\",\n  a: \"am\",\n  A: \"AM\",\n  h: \"14\",\n  kk: \"14\",\n  k: \"14\",\n  m: \"30\",\n  mm: \"30\",\n  s: \"15\",\n  ss: \"15\"\n}\n```\n\nWhereas the `v-model` will only return the data with defined tokens\n\n```javascript\n// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}\n// Hence, the `v-model` returns:\n{\n  HH: \"14\",\n  mm: \"30\",\n  ss: \"15\"\n}\n```\n\n### Define Hour Range\n\nSometime you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.\n\n```html\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\"></vue-timepicker>\n```\n\nValid (selectable) hours in this example are: 5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19\n\n### Hide Disabled Hour Ranges\n\n```html\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\" hide-disabled-hours></vue-timepicker>\n```\n\nPaired with the above `hour-range` parameter. In this sample, the hour picker will hide 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.\n\n### Disable Picker\n\n```html\n<vue-timepicker disabled></vue-timepicker>\n```\n\nUsed to disable dropdown picker and clear button in the UI. To prevent users from changing values again.\n\n## Props API\n\nProp                    | Type      | Required | Default Value\n----------------------- | --------- | -------- | -------------\n**v-model**             | _Object_  | no       | _undefined_\n**format**              | _String_  | no       | \"HH:mm\"\n**minute-interval**     | _Number_  | no       | _undefined_\n**second-interval**     | _Number_  | no       | _undefined_\n**hide-clear-button**   | _Boolean_ | no       | false\n**hour-range**          | _Array_   | no       | _undefined_\n**hide-disabled-hours** | _Boolean_ | no       | false\n**disabled**            | _Boolean_ | no       | false\n\n## Contribution\n\nPlease feel free to fork and help developing.\n\n```bash\n# Install dependencies\nyarn install\n\n# Init development dependencies\nyarn dev:init\n\n# Start developing. Serve with hot reload at localhost:8080\nyarn serve\n```\n\nFor detailed explanation on how things work, checkout the [Vue Cli Guide](https://cli.vuejs.org/guide/).\n\n## Change Log\n\nDetail changes for each release are documented in [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","readmeFilename":"README.md","gitHead":"44a7328301084e21736a2f9d40ba8ce918640e95","_id":"vue2-timepicker@0.2.0-beta.2","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-qcCqvRmxVofjadP7Eg5Zu8xrpEQ1HIVtKkemM+2Q2CnF0HxjAoN4eVoxqo5UcfixlsCeytH99S3FMnxWufa9Lg==","shasum":"fa48f5d261c058f993f89e4c244932a04a980b88","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.2.0-beta.2.tgz","fileCount":16,"unpackedSize":596839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdScOZCRA9TVsSAnZWagAAQpcP/059BkIhZZj9bh04kHUa\n+Aobtr+FPU34Z2AUgi7/FDHb6fjzOn9szFMF52Si5pEcWvhQ52SNShBN4Euu\n0N1bB2Ic0dgu1RAyfFfSVu8SPQqbf4c2ueb5/Rhrj/E+iP5Msrx91R+ceAbG\n9ICEsVqvCsO5xIJltSQrSxzgnsC6BugjMh20GRhZXrv6gqImoEWGlpB4m6oP\nxkiXVzuqLcMGMeA3VQwclA8yWXTnvv4U4uOrk1/jMhPa760v2I/PcJMHNQPs\nqvbvtgyDD0kWk8u0KXUX9VDKLdpgFLxYBVPorK51Q0ri5pwiaBBwFdIfDjpP\nhzoEb0tKJMdRq1sl952+dkHOTDxUeG6sgV1wdF9YitFf5+zU9RISA4dzikMQ\njTQ2XuYctWlGoTZrIFCu5BEQIE3njPpW3ZrvcrKy3YSk6qzgpmlorLG/O56k\nuPK1E0vrsbol9ImhHGCejusZNOT6QrxIox/pwbFHH6iLUBZZL/T8xGy2gYof\nJ0XddVgbU1G+fsfQb1x0wasYNabaFwVlztEXc4s2KAhBkvmv6tewF4wxj5O1\nTpT1tJJf6hD2l0s9p2+3yo3vyTHI538t/f1RYQy570svCKHAJg/0O2nFeY7U\nPAWCf2s/nAlhb9xkn5qlr/dHfPnA8UKFH28K3y/ifdtP4G3qB7LkgCyY4Xzm\nzzMM\r\n=HXVH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGwMb8ysPuguwP1fE4XJn6NbM1l20mxincEIMvqKXEjQIhAM0XbiE/nHfr808Jw4hRRvbzi9/rSSGaUO35i1a7WBaF"}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_0.2.0-beta.2_1565115288650_0.26670466827873884"},"_hasShrinkwrap":false,"deprecated":"test flght version deprecated"},"0.2.0-beta.3":{"name":"vue2-timepicker","version":"0.2.0-beta.3","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"src/index.js","css":"dist/VueTimepicker.css","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.9.0","@vue/cli-plugin-eslint":"^3.9.0","@vue/cli-service":"^3.9.0","babel-eslint":"^10.0.1","core-js":"^2.6.5","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","readme":"# Vue2 Time Picker  ![GitHub package.json version](https://img.shields.io/github/package-json/v/phoenixwong/vue2-timepicker?color=success&style=flat-square) ![GitHub release](https://img.shields.io/github/release/phoenixwong/vue2-timepicker?label=github&style=flat-square) ![GitHub package.json version (branch)](https://img.shields.io/github/package-json/v/phoenixwong/vue2-timepicker/beta?style=flat-square)\n\n---\n\n💡 Dead repo recharged in 2019 🔋\n\n---\n\nA dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.\n\n## Demo\n\nYou can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)\n\n## Migration\n\nMigrating from the Vue 1.x version? Please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines.\n\n## Dependencies\n\n[Vue.js](http://vuejs.org/) v2.6.5+\n\n## Installation\n\nThrough YARN or NPM\n\n```bash\nyarn add vue2-timepicker\n```\n\n```bash\nnpm install vue2-timepicker --save\n```\n\n## Get Started\n\n**Step 1:** Import VueTimepicker\n\n**A:** Include the single file component (Recommended)\n\n```javascript\n// Import the *.vue file (CSS included)\nimport VueTimepicker from 'vue2-timepicker'\n```\n\nor, **B:** Include distribution files base on your needs\n\n```javascript\n// JAVASCRIPT\n// - commonJS\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'\n// - UMD\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'\n// - UMD Minified\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n```\n\n**Step 2**: Include VueTimepicker in your component\n\n```javascript\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  ...\n})\n```\n\n**Step 3**: Then, you can introduce the `vue-timepicker` tag anywhere you like in your component's template\n\n```html\n<vue-timepicker></vue-timepicker>\n```\n\n## Usage\n\n### Basic Usage\n\n```html\n<!-- Default to 24-Hour format HH:mm -->\n<vue-timepicker></vue-timepicker>\n```\n\n### Customized Time Format\n\n```html\n<!-- Show seconds picker -->\n<vue-timepicker format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- 12-hour format, with AM/PM picker -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n\n<!-- 12-hour format, with seconds picker and am/pm picker -->\n<vue-timepicker format=\"hh:mm:ss a\"></vue-timepicker>\n```\n\nVueTimepicker will recognizes the following tokens in the format string\n\nSection    | Token | Output\n---------- | ----- | ---------------\n**AM/PM**  | A     | AM PM\n&nbsp;     | a     | am pm\n**Hour**   | H     | 0 1 ... 22 23\n&nbsp;     | HH    | 00 01 ... 22 23\n&nbsp;     | h     | 1 2 ... 11 12\n&nbsp;     | hh    | 01 02 ... 11 12\n&nbsp;     | k     | 1 2 ... 23 24\n&nbsp;     | kk    | 01 02 ... 23 24\n**Minute** | m     | 0 1 ... 58 59\n&nbsp;     | mm    | 00 01 ... 58 59\n**Second** | s     | 0 1 ... 58 59\n&nbsp;     | ss    | 00 01 ... 58 59\n\n> If not set, `format` string will be default to \"HH:mm\"\n\n### Customized Picker interval\n\n```html\n<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->\n<vue-timepicker :minute-interval=\"5\"></vue-timepicker>\n\n<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->\n<vue-timepicker :second-interval=\"10\"></vue-timepicker>\n\n<!-- Bind interval config with your own data variable -->\n<vue-timepicker :minute-interval=\"yourMinuteInterval\"></vue-timepicker>\n```\n\n**Note:** Please do remember to add the `:` or `v-bind:` sign before the interval properties\n\n### Hide Clear Button\n\n```html\n<vue-timepicker hide-clear-button></vue-timepicker>\n```\n\n### Bind Value with `v-model`\n\n```javascript\n// e.g. If you want to assign \"10:05:00\" as the initial value of vue-timepicker\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  data: function () {\n    return {\n      yourTimeValue: {\n        HH: \"10\",\n        mm: \"05\",\n        ss: \"00\"\n      },\n      ...\n    }\n  },\n  ...\n})\n```\n\n```html\n<!-- HTML -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n### Get Time Picker's Current Value\n\n#### **Method 1:** Read value from `v-model`\n\n```html\n<!-- In the last section, we've set the initial value (yourTimeValue) to \"10:05:00\" -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n```javascript\n// Then, open the dropdown picker and pick a new time.\n// Like setting to \"14:30:15\" for example\n// Check the value after that\nconsole.log(this.yourTimeValue)\n// outputs -> {HH: \"14\", mm: \"30\", ss: \"15\"}\n```\n\n#### **Method 2:** Add `@change` event handler\n\n```html\n<!-- A: No argument -->\n<vue-timepicker :time-value.sync=\"yourTimeValue\" @change=\"changeHandler\"></vue-timepicker>\n\n<!-- B: Custom arguments -->\n<vue-timepicker :time-value.sync=\"yourTimeValue\" @change=\"otherChangeHandler($event, 'foo', 'bar')\"></vue-timepicker>\n```\n\n```javascript\n// A: No argument\nchangeHandler (eventData) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }}\n}\n\n// B: Custom arguments\notherChangeHandler (eventData, yourArg1, yourArg2) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }}\n  console.log(yourArg1)\n  // -> 'foo'\n  console.log(yourArg2)\n  // -> 'bar'\n}\n```\n\nUnlike `v-model`, which only returns the defined time tokens you provided in the binding variable, the `change` event will return **all** supported formats.\n\nIn the example above, when picker is set to \"14:30:15\" in HH:mm:ss format, `change` event will return the following data:\n\n```javascript\n// `@change` event data\n{\n  HH: \"14\",\n  H: \"14\",\n  hh: \"14\",\n  a: \"am\",\n  A: \"AM\",\n  h: \"14\",\n  kk: \"14\",\n  k: \"14\",\n  m: \"30\",\n  mm: \"30\",\n  s: \"15\",\n  ss: \"15\"\n}\n```\n\nWhereas the `v-model` will only return the data with defined tokens\n\n```javascript\n// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}\n// Hence, the `v-model` returns:\n{\n  HH: \"14\",\n  mm: \"30\",\n  ss: \"15\"\n}\n```\n\n### Define Hour Range\n\nSometime you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.\n\n```html\n<!-- 24-Hour Format -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\"></vue-timepicker>\n<!-- >> Equals to :hour-range=\"[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]\" -->\n\n<!-- 12-Hour Format -->\n<vue-timepicker(:hour-range=\"['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']\" format=\"hh:mm a\">\n<!-- >> Equals to :hour-range=\"['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']\" -->\n```\n\n### Hide Disabled Hour Ranges\n\n```html\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\" hide-disabled-hours></vue-timepicker>\n```\n\nPaired with the above `hour-range` parameter. In this sample, the hour picker will hide 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.\n\n### Disable Picker\n\n```html\n<vue-timepicker disabled></vue-timepicker>\n```\n\nUsed to disable dropdown picker and clear button in the UI. To prevent users from changing values again.\n\n## Props API\n\nProp                    | Type      | Required | Default Value\n----------------------- | --------- | -------- | -------------\n**v-model**             | _Object_  | no       | _undefined_\n**format**              | _String_  | no       | \"HH:mm\"\n**minute-interval**     | _Number_  | no       | _undefined_\n**second-interval**     | _Number_  | no       | _undefined_\n**hide-clear-button**   | _Boolean_ | no       | false\n**hour-range**          | _Array_   | no       | _undefined_\n**hide-disabled-hours** | _Boolean_ | no       | false\n**disabled**            | _Boolean_ | no       | false\n**id**                  | _String_  | no       | _undefined_\n**name**                | _String_  | no       | _undefined_\n\n> `id` and `name` will be assign to the <input type=\"text\" class=\"display-time\"> within the component\n\n## Contribution\n\nPlease feel free to fork and help developing.\n\n```bash\n# Install dependencies\nyarn install\n\n# Init development dependencies\nyarn dev:init\n\n# Start developing. Serve with hot reload at localhost:8080\nyarn dev\n```\n\nFor detailed explanation on how things work, checkout the [Vue Cli Guide](https://cli.vuejs.org/guide/).\n\n> NOTE: From `^0.2.0` on, we develop demos page with **yarn**, **pug**, and **stylus**\n\n## Change Log\n\nDetail changes for each release are documented in [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","readmeFilename":"README.md","gitHead":"d317ad3224f7b806e31f6f745f63c269433fa856","_id":"vue2-timepicker@0.2.0-beta.3","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-sVeGvPLNSYA8hQjNsIsdXg4AIaO0PTEsYtlZ9SCsTx5MoZX2CxYWJwzLCTL3rmGzftVp2j0BWKNsk79SnFA5zQ==","shasum":"92171681465f791b45460e44c29b09c4eb1a14c2","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.2.0-beta.3.tgz","fileCount":16,"unpackedSize":598623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSj7eCRA9TVsSAnZWagAAnpkP/0Lo3tgjk/q56xc9w5Gf\n21N4InDs6iPRq8vWfz10TX9qnnObkUrUaO9NDk7MExiA/hEgJ2Vi3YYelISO\nl4LA/hlZdDpo7nk60TFs4FcyEBNBmMYqKo2RbyVdcSrTxJd5hCLcA7hQVLB3\nzm5E+FmFFJxZmH5nuw3cdsbqrxKHVZMfcf5l4uJY3oQ4VObvrNURV4AqHSLd\nBECxYdeOvR1/vXmQt2HPVKhl/ArMA+Vr+tDyGE/iAYiVsCFxDHBCb8wmbdLM\nEo103nxgeHRpKLCxwuNBNcLnLKyAd0dSBVVyCfuEGG1E3jFhLuR5r51mN3+9\nSxy1XvUS+JjB0ffOfSIx8QbqgRZeHD964VTDQ0bdr8dhdJ2WIgHIUh6w8rVk\nlR4vIDyxI7etLabFw+waIJcmFX5mYcSRLp70kSxluc1wHBfgJvGAREBUUi1z\nsFg/XAC4ZrRUFCwJreHMclZl/mZnN5077B3EcOfTNaYasVp4jbX3lfF+NKva\n4g+cs5QkIUEmP1X9ldiPU3Y0HmvRTPSW2E/rRt/mXdgH9PpIEO1TvGZShVEK\nbqshD6TgFTcg6z9gVi22DUiQHUIzonJ6C67c5GYAVA/99ZSYcWD91jNnzTBA\no/2H8t6UBqtsV+nd+4Ta2Ph5qP4uUvA50rMM3OmiPDyeYcmTuZNSgh1w2mh3\nKsKr\r\n=bnJU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0DdX0Q3ybLOAd5BB7iE65AW8rtRK05RUhf7q8i7QLrwIgcmwRc8KtjUMLDVCwvd79PQn2+wkp2LFEkHz5z6WelRA="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_0.2.0-beta.3_1565146845475_0.24168272330359364"},"_hasShrinkwrap":false,"deprecated":"test flght version deprecated"},"0.2.0":{"name":"vue2-timepicker","version":"0.2.0","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"src/index.js","css":"dist/VueTimepicker.css","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.9.0","@vue/cli-plugin-eslint":"^3.9.0","@vue/cli-service":"^3.9.0","babel-eslint":"^10.0.1","core-js":"^2.6.5","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"ff329c0a22a335d2b00e3f61770d3f7a8c3beba5","_id":"vue2-timepicker@0.2.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-vK1ivHiM8zH/tg8VMWruDFHSXynrbjIL4s6tqt2PAPuFa5KoIDerUPBavWnm0wGFbExrpR7R0T2dowpBjRns2Q==","shasum":"1052c3210adbe5ac41795679bf16415f8b4d096a","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.2.0.tgz","fileCount":16,"unpackedSize":598697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSkZaCRA9TVsSAnZWagAA3IsP/1QLniDaklXGJ1WKgR0m\nhpWbzd3ykIgYhVyUbdzjv8SSpFvrE9WTZkBVxdg2YYjX8eG8RRgXqrCkrHcC\nCbuYJXlM82eQhWDpPz6njsDNm7UhJG/Q6J2CJ4sL+Dn+3dhvNR5PMpNZagop\nbGtCtASD8dOl8UCgu0F1bCiMrdr/uAlxPaUjdNO91hMwDx7HHg4pfSJkrK/y\nPq9nD2gTXE6c4NWUL4XMjaHfKtEIvohiebhMDumaynFLzZhKdGc9Uk5q9yGK\nzf9rUFwBhtqDZuIZt8XTd3FUkeit7zgDq22uC24qcVjFe6CnXlv+i2Gke1bQ\n5LrtGt0c7QfE9WwGS8gchKFoM1nx+gbsifLT54mA7pZit+A5TRoZYcD1g6uh\nnDafPd6/C5xb3SR1SAph/AmU2KOt74/WH90/4IId6pXczLfUS1MrIarJcqNE\nyCeTF89RusHJdvbRQv4A/9OMC2CAyRWmFd4h5XFzRwLMIItPmty4hPuo9U+l\nLM+zuMIK46gG3tEpPpUgcP3wpLSbOIPhLbyPE4QioW/MYx/UiQUugAdAd0cI\nG2j0MakK+jwlZtS5Gf9XSzvtiwSbrVPfsZfAqZTFmbnwJxHNWaXBo2gGf79h\n6roaLyuBqjb3QzXgDgXJMaLjmATH+XSzkrbeQYblS1OyDCyCHxKGfmHngwLx\nn0QA\r\n=WRkH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEDIlzCSEenG9vB943Xp+Ttgjfbn1IhEvTsM04xNlb/wIhAJbuQ/oAQ0kQzITRJ0CukO9K20q8hvcd/0X/YVLDd/mj"}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_0.2.0_1565148762192_0.896480601424889"},"_hasShrinkwrap":false},"0.2.1":{"name":"vue2-timepicker","version":"0.2.1","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"src/index.js","css":"dist/VueTimepicker.css","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.9.0","@vue/cli-plugin-eslint":"^3.9.0","@vue/cli-service":"^3.9.0","babel-eslint":"^10.0.1","core-js":"^2.6.5","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"a4780be2242cc1e6d00ebafd5d48a1397909024e","_id":"vue2-timepicker@0.2.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-QdAOzg3ZfutYFQ23YFB1sA+zoFyzYLmF36VQpHJgaV5urB82vril80EBN156wIcCjMVa82muy6Itbq4h/TDkHQ==","shasum":"4ebf1fc1624b5cff2b755c59223024dee3dc99a1","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.2.1.tgz","fileCount":15,"unpackedSize":602048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTaA0CRA9TVsSAnZWagAAWZcQAKHoynfkCYD72TdLJH94\npjhNDEBGBRa7woe3j6CyTkpTlQGctS98y39KTrDWo/K85crJRluiXaxE8GGX\npWVykYccT54JwiK8d+0tvmmW51bmvq0MRuV8QzMdYiub1XN3UmyzbG80zkxh\n6alQnz/m2NCoWiA+6kNr3uvapeITLcIy7wDZxqvy71rfrKqoA50++rCL5GhO\nb5ZMCtnN5QjMBKFJaY0EJ2FLRpCkb/Lr33FuTMvP1JKdMceGS2pshd4dT7jU\nvp3A+QtMsXuLcmag1RIDnk4uERHpjAVpfcnEh2g3sF2L14BfukhbNEv/G+4h\nwZugnw2+UiU/bTqk9yZDAqYFEoI6RVS12fN1KUEWRMialzGj0wefLRrK/a1H\n+DVUw41D5sdgk+aleXM3vV1L2Jk6G1jdyEjr3b3RfUiDYXwkcZTH0biGcUHV\nJITTDckOYDkY263ZbAonlg8K68zquSABeoE9E2W4ULFEfYFyTTiUihSp1t93\nSu0kXBs17xhvdgXlie4LDXYz2oj47l17zMOsppJtNH3gkAWM7lQnJpTbNlrN\n8rzwWPFD7C0B9UWl7lBTKxuHwyZ+b3STgpSZEWQNGJll7HYnj4r4vyGJ2C8d\nZ/SorlMBj0Mx5fusnUv4zqfMkfInr5wYrI4rEC6EqknS5Kd1nPd/CZR5c2ME\n12ss\r\n=U0hC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWLnMSu/JlbMHAjb0DZ9yPiTcuR2qkVDcoUZpF3yicCwIgWgjaM/31+tdFK0cVAE6UQnosBUpteBmdaQT/VxvWir0="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_0.2.1_1565368371546_0.7356498085743572"},"_hasShrinkwrap":false},"0.2.2":{"name":"vue2-timepicker","version":"0.2.2","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"src/index.js","css":"dist/VueTimepicker.css","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.9.0","@vue/cli-plugin-eslint":"^3.9.0","@vue/cli-service":"^3.9.0","babel-eslint":"^10.0.1","core-js":"^2.6.5","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"5a39bd2fcc6bc9f78118fab3e45e22126f02151d","_id":"vue2-timepicker@0.2.2","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ote/hKIqiNMTxGezg3lUCrdUXZIzD7lKEZw/cNvCblWtueVzCiv4Ie7HMkuum0Wve5uxqFwATHsRTbjnH9xe0g==","shasum":"c728b3ce4aea81398d6b23f78eabf4ed2fe94eb8","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.2.2.tgz","fileCount":15,"unpackedSize":603016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTpaJCRA9TVsSAnZWagAAWIoP/jE9obDK5dpPzBxA/9iS\nlWDSYsvaxJx9CgrZ6FTAIpm5T7/+/4CCwTdUH56otFUy8tK5yW9tzxMt/FKM\nUu8Sp9qzazfBRS/tKLoJJHY4iPl7Vndwn9e19Uft69ia1pPvTyV7XlSnLlVG\n2c3bWN/ce6wrroQPdfZjelHDi6Usq68RttCsepdLyNibkFpjGUNyNdgiSydR\nmdar7YZQHgQITBcRv/Q/sdLqoN1ulZTd+kBfQtflo52hPsp7LxJuZNnQ11Jk\n4DpfPohdopZKYwVXmLGCdtVA714aJuZ7WCIuS8Z/k5OcBPFMIrcIaIzwxrG7\nA8twGm80pjDzyMt7Xc3u4iOFFDcTSFb0yL6JF6zPROtwPqP9Y27ROot55dMt\nlPWZQzGWXJachoNIuqxinrzBpFlzRuAL3vWQMleFgR4ArplhoeR9NxnbE783\nKf/1W+eEij4IXLr9xWI82+d7fNszTejMmhS6MguIhNd9RvF+Pqy62uo3mxc7\n/hWB4+aglMYHI2DzdVyj/cDRUUzBAs8Woq3uQcfjFqWOITGjzKMRv3nHMnS0\nqQrG2uqkdC71enVt8a/7n88ReiFYDCS1hAAmo+FEXMLtB0yMQTwybvAsfaEt\nVugcfDasWA510cE45uoPePjD9jqbysU2RSSVO2+wDxHb9unGjdaSY11yUSc8\nUuPF\r\n=mfSB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWQBevx915MG3/yygdiNE10BlNeiWeM7J9YnrUt9FibAiEA6tax+3eYBLbYp5TkJNh7HQJ8/hMkmJqrtd02ugHm2SQ="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_0.2.2_1565431432776_0.11260892893403085"},"_hasShrinkwrap":false},"0.2.2-rc.0":{"name":"vue2-timepicker","version":"0.2.2-rc.0","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.9.0","@vue/cli-plugin-eslint":"^3.9.0","@vue/cli-service":"^3.9.0","babel-eslint":"^10.0.1","core-js":"^2.6.5","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"c497afeeb8fc1c7d8c2a46d449300963dfd9c871","_id":"vue2-timepicker@0.2.2-rc.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-d59dnf5BqnPycI1c+iq4WGef3V3gaH0jMKwOptkfkMtsFf88BZIWOLrpVjC8EnNonpyUbjD72LOXQYkzwfwtjQ==","shasum":"e29336dcdbcb5f161dd81adb51b24b5489d5c8d9","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-0.2.2-rc.0.tgz","fileCount":16,"unpackedSize":606540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUYhkCRA9TVsSAnZWagAAZuoP/iZhzFW86Y9I6BSvHitA\nB4oLPwWdGhS9DJMwy6QHe6hmcHIgeDrXx5mqaJT/3IsdNACaEC4UXwb7ymQn\nK2MGU/i5Y+oqiElNSQftZcch8lG4AmwcJkv0vCG4v83tOIFb3GgzEbGXCHew\nuiYBh78uTZ1c97E/vTN8u3A6ZPur0yoiN3shGZJR04hkHw15QhBIQeFjEvGa\nFJBGSbfC8gxJR37tlX/bF1eze0oWJlUxh3pk932YD30U61/NbTG7PJ0/MqV/\nhKb2Stg0lZN5RfT/piLUvLZ1GJx/gUj0mhvfYblrm7dOnXQohuSiXmQQbmpO\n8DhBshK4UOiWKq0b5gibIy8sVHSMFH3Gtq/12JKXRwnuZOokxTYW3UO3DrCo\ntNBpUQbK095Q/bGax0wTKpPz7itarokqlf+AI6owwTimvH1IVsb7sXUGU5a+\n3cjcyJvm2HiVoTYM/ZzGenTTtALyZp+HctKVS885sKUF33Qmd/GyStIRDJOc\nSRw9c1FwhcKxU5DBUnRKaSGYFEe3G1uh2PJrPB4GYQn9PxyK6wAhYA3KoLSa\n0wNMAP6LdwY+CyoIPdaXAImiJ/cMvhCVsQRwB00nsUQt53zSd5JdaRotP1PG\nkKkiSStOmWvwj/ztkAH1t822LWZ5KnEUDM2F9V0xcVT7J2nMokfFs1xp52XV\nbMz3\r\n=r599\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEntOE5M3rOrf8IB2rathxHt2TOi1W3CwUmIAdZk9G+sAiBrhF5BZ1C4OkecMYZbc67meumyQSD3WPJvMgVYZVKRHA=="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_0.2.2-rc.0_1565624419530_0.3842564278623073"},"_hasShrinkwrap":false},"1.0.0-beta.0":{"name":"vue2-timepicker","version":"1.0.0-beta.0","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.9.0","@vue/cli-plugin-eslint":"^3.9.0","@vue/cli-service":"^3.9.0","babel-eslint":"^10.0.1","core-js":"^2.6.5","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","readme":"# Vue2 Timepicker  \n\n![GitHub version](https://img.shields.io/github/package-json/v/phoenixwong/vue2-timepicker?color=success&style=flat-square)\n![npm version](https://img.shields.io/npm/v/vue2-timepicker?style=flat-square)\n![GitHub release](https://img.shields.io/github/release/phoenixwong/vue2-timepicker?label=github&style=flat-square)\n![npm downloads](https://img.shields.io/npm/dm/vue2-timepicker?style=flat-square)\n\n---\n\n💡 Dead repo recharged in 2019 🔋\n\n---\n\nA dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.\n\n## Demo\n\nYou can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)\n\n## Migration\n\nPlease check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines if you are about to:\n\n- Migrate from the Vue 1.x version **[vue-time-picker](https://github.com/phoenixwong/vue-timepicker)**\n- Migrate from Bower to Yarn or NPM (Vue2 Timepicker `v0.1.x` -> `v0.2.0+`)\n\n\n## Dependencies\n\n[Vue.js](http://vuejs.org/)&nbsp;&nbsp;&nbsp;![npm peer dependency version](https://img.shields.io/npm/dependency-version/vue2-timepicker/peer/vue?style=flat-square)\n\n## Installation\n\n```bash\nyarn add vue2-timepicker\n```\n\n```bash\nnpm install vue2-timepicker --save\n```\n\n> NOTE: We stop Bower support from `0.2.0+`, please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md#migrating-from-bower-to-yarn-or-npm) for migration guidelines.\n\n## Get Started\n\n### **Step 1:** Import VueTimepicker\n\n**Option A:** Import component JS and CSS\n\n```javascript\n// Main JS (in UMD format)\nimport VueTimepicker from 'vue2-timepicker'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n```\n\n**Option B:** Choose any bundle version base on your needs\n\n```javascript\n// JAVASCRIPT\n// - CommonJS\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'\n// - UMD\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'\n// - UMD Minified\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n\n// Single File Component (the *.vue file with CSS included)\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n```\n\n**SSR Usage:** Import the single file component for SSR Usage\n\n```javascript\n// Import the *.vue file (CSS included)\n// Note the `/sfc` suffix here\nimport VueTimepicker from 'vue2-timepicker/sfc'\n```\n\n### **Step 2**: Include VueTimepicker in your component\n\n```javascript\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  ...\n})\n```\n\n### **Step 3**: Put `vue-timepicker` in your component's template\n\nThen, you can introduce the `vue-timepicker` tag anywhere you like in your component's template\n\n```html\n<vue-timepicker></vue-timepicker>\n```\n\n\n## Basic Usage\n\n### Base\n\n```html\n<!-- Default to 24-Hour format HH:mm -->\n<vue-timepicker></vue-timepicker>\n```\n\n### Customized Time Format\n\n```html\n<!-- Show seconds picker -->\n<vue-timepicker format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- 12-hour format, with AM/PM picker -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n\n<!-- 12-hour format, with seconds picker and am/pm picker -->\n<vue-timepicker format=\"hh:mm:ss a\"></vue-timepicker>\n```\n\nVueTimepicker recognizes the following tokens in the format string\n\nSection    | Token | Output\n---------- | ----- | ---------------\n**AM/PM**  | A     | AM PM\n&nbsp;     | a     | am pm\n**Hour**   | H     | 0 1 ... 22 23\n&nbsp;     | HH    | 00 01 ... 22 23\n&nbsp;     | h     | 1 2 ... 11 12\n&nbsp;     | hh    | 01 02 ... 11 12\n&nbsp;     | k     | 1 2 ... 23 24\n&nbsp;     | kk    | 01 02 ... 23 24\n**Minute** | m     | 0 1 ... 58 59\n&nbsp;     | mm    | 00 01 ... 58 59\n**Second** | s     | 0 1 ... 58 59\n&nbsp;     | ss    | 00 01 ... 58 59\n\n> If not set, the `format` string is default to \"HH:mm\"\n\n### Customized Picker interval\n\n```html\n<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->\n<vue-timepicker :minute-interval=\"5\"></vue-timepicker>\n\n<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->\n<vue-timepicker :second-interval=\"10\"></vue-timepicker>\n\n<!-- Bind interval config with your own data variable -->\n<vue-timepicker :minute-interval=\"yourMinuteInterval\"></vue-timepicker>\n```\n\n\n## Data Binding\n\n### Bind Value with `v-model`\n\nFrom `v1.0.0+`, timepicker's `v-model` accepts value in both _Object_ (default) and _String_ format. The `v0.x` versions only support _Object_ form.\n\n#### Set Initial Value\n\nFor example, if you want to set \"10:05:00\" (\"HH:mm:ss\" format) as the initial value of vue-timepicker:\n\n```javascript\nconst yourComponent = new Vue({\n  components: { VueTimepicker },\n  data () {\n    return {\n      // Object form\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      // String form\n      yourStringTimeValue: '10:05:00',\n      ...\n    }\n  },\n  ...\n})\n```\n\nBoth forms lead to the same result.\n\n```html\n<!-- Object form -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- String form -->\n<vue-timepicker v-model=\"yourStringTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n#### Set Empty Initial Value\n\nWhen the initial value is completely unknown:\n\n```javascript\ndata () {\n  return {\n    // Will be rendered as Object form\n    yourEmptyValue: {},\n    emptyValueToo: undefined,\n    emptyValueAsWell: null,\n\n    // Will be taken into String form\n    yourEmptyStringValue: ''\n  }\n}\n```\n\n#### Set Partially-Known Initial Value\n\nFor instance, if you want to set the initial hour value to **8 pm** and leave the rest slots empty:\n\n```javascript\ndata () {\n  return {\n    // OBJECT FORM\n    // Default 24-Hour\n    timeValue: {\n      HH: '20',\n      mm: ''\n    },\n    // 12-Hour with seconds\n    timeValueWithSec: {\n      h: '8',\n      mm: '',\n      ss: '',\n      A: 'PM'\n    },\n\n    // STRING FORM\n    // Default 24-Hour + String value\n    stringTimeValue: '20:mm',\n    // 12-Hour with seconds + String value\n    stringTimeValueWithSec: '8:mm:ss PM'\n  }\n}\n```\n\n```html\n<!-- OBJECT FORM -->\n<!-- Default 24-Hour -->\n<vue-timepicker v-model=\"timeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds -->\n<vue-timepicker v-model=\"timeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n\n<!-- STRING FORM -->\n<!-- Default 24-Hour + String value -->\n<vue-timepicker v-model=\"stringTimeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds + String value -->\n<vue-timepicker v-model=\"stringTimeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n```\n\n### Get Time Picker's Current Value\n\n#### Get value from `v-model`\n\nYou can either read the binding `v-model` value anytime or add a handler to deal with the `input` event from vue-timepicker.\n\n```html\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\" @input=\"inputHandler\"></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      ...\n    }\n  },\n\n  methods: {\n    inputHandler (eventData) {\n      console.log(eventData)\n    }\n  }\n}\n\n```\n\nIn 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.\n\n```javascript\n// In `inputHandler`:\n// console.log outputs -> {HH: \"14\", mm: \"30\", ss: \"15\"}\n```\n\n### Read Data From `change` Event\n\n```html\n<!-- A: No argument -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"changeHandler\"></vue-timepicker>\n\n<!-- B: Custom arguments -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"otherChangeHandler($event, 'foo', 42)\"></vue-timepicker>\n```\n\n```javascript\n// A: No argument\nchangeHandler (eventData) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n}\n\n// B: Custom arguments\notherChangeHandler (eventData, yourArg1, yourArg2) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n  console.log(yourArg1)\n  // -> 'foo'\n  console.log(yourArg2)\n  // -> 42\n}\n```\n\nUnlike `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.\n\nIn the example above, after the user set values to \"14:30:15\" in the picker, `change` event returns the following data:\n\n```javascript\n// `@change` event data\n{\n  data: {\n    HH: \"14\",\n    H: \"14\",\n    hh: \"14\",\n    a: \"am\",\n    A: \"AM\",\n    h: \"14\",\n    kk: \"14\",\n    k: \"14\",\n    m: \"30\",\n    mm: \"30\",\n    s: \"15\",\n    ss: \"15\"\n  },\n  // extra `displayTime` added since v0.2.2\n  displayTime: \"14:30:15\"\n}\n```\n\nWhereas the `v-model` / `input` only return the data with defined tokens\n\n```javascript\n// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}\n// Hence, the `v-model` returns:\n{\n  HH: \"14\",\n  mm: \"30\",\n  ss: \"15\"\n}\n```\n\n## Advance Usage\n\n### Hide Clear Button\n\n```html\n<vue-timepicker hide-clear-button></vue-timepicker>\n```\n\nEnable to hide the \"&times;\" clear button on the right-hand side. Users can still pick new values from the dropdown, but they cannot erase any selected data.\n\n### Disable Picker\n\n```html\n<vue-timepicker disabled></vue-timepicker>\n```\n\nFully disable both dropdown picker and the \"&times;\" clear button in the UI, to prevent users from changing any values again.\n\n### Define Hour Range\n\nSometimes you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.\n\n```html\n<!-- 24-Hour Format -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\"></vue-timepicker>\n<!-- >> Equals to :hour-range=\"[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]\" -->\n\n<!-- 12-Hour Format -->\n<vue-timepicker :hour-range=\"['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']\" format=\"hh:mm a\">\n<!-- >> Equals to :hour-range=\"['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']\" -->\n```\n\n### Hide Disabled Hour Ranges\n\n```html\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\" hide-disabled-hours></vue-timepicker>\n```\n\nIt's a pair with the above `hour-range` parameter. In this sample, 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.\n\n### Enable Debug Mode\n\n```html\n<vue-timepicker debug-mode></vue-timepicker>\n```\n\nIt'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.\n\nLet's create a \"bug\" as an example --\n\n```html\n<!-- Manual Bug Sample: Define timepicker with format \"h:mm:ss A\" -->\n<vue-timepicker v-model=\"yourStringValue\" format=\"h:mm:ss A\" debug-mode></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      // Manual Bug Sample:\n      // Should be '3:mm:05 A' but oops.. the finger slipped\n      yourStringValue: 'e:mm:05 A'\n    }\n  }\n}\n```\n\nThen, in the console window, you should see a debug log saying:\n\n```console\nDEBUG: The input string in 'v-model' does NOT match the 'format' pattern\nformat: h:mm:ss A\nv-model: e:mm:05 A\n```\n\n## Main Props API\n\nProp                    | Type               | Required | Default Value\n----------------------- | ------------------ | -------- | -------------\n**v-model**             | _Object_, _String_ | no       | _undefined_\n**format**              | _String_           | no       | \"HH:mm\"\n**minute-interval**     | _Number_           | no       | _undefined_\n**second-interval**     | _Number_           | no       | _undefined_\n**hide-clear-button**   | _Boolean_          | no       | false\n**disabled**            | _Boolean_          | no       | false\n**hour-range**          | _Array_            | no       | _undefined_\n**hide-disabled-hours** | _Boolean_          | no       | false\n**debug-mode**          | _Boolean_          | no       | false\n\n\n## Input Props API\n\nProp                    | Type      | Required | Default Value\n----------------------- | --------- | -------- | -------------\n**id**                  | _String_  | no       | _undefined_\n**name**                | _String_  | no       | _undefined_\n**placeholder**         | _String_  | no       | _undefined_\n**input-class**         | _String_  | no       | _undefined_\n\nTimepicker now supports `id`, `name`, and `placeholder` like common form elements. Values will be assigned to the\n`<input type=\"text\" class=\"display-time\">` within the component.\n\n### Input `id` And `name`\n\n```html\n<!-- id -->\n<vue-timepicker id=\"myFirstPicker\"></vue-timepicker>\n\n<!-- name -->\n<vue-timepicker name=\"nameInForm\"></vue-timepicker>\n```\n\n### Input `placeholder`\n\nWhen `placeholder` is undefined, timepicker takes the determined format string instead.\n\n```html\n<!-- placeholder is set -->\n<vue-timepicker placeholder=\"Start Time\"></vue-timepicker>\n<!-- -> \"Start Time\" -->\n\n<!-- placeholder not set -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n<!-- -> \"hh:mm A\" -->\n\n<!-- both placeholder and format are not set -->\n<vue-timepicker></vue-timepicker>\n<!-- -> \"HH:mm\" -->\n```\n\n### The `input-class`\n\nThe `input-class` is assigned to the text input within the component as well.\n\n```html\n<!-- Set your own `input-class` in the Vue template -->\n<vue-timepicker input-class=\"my-awesome-picker\"></vue-timepicker>\n```\n\n```html\n<!-- HTML result -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time my-awesome-picker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n\n```\n\n## Events API\n\nEvent          | Arguments      | Description\n-------------- | -------------- | ----------------------\n**input**      | (_value_)      | Emit after value changes\n**change**     | (_eventData_)  | Emit after value changes\n**open**       | &nbsp;         | Emit when the dropdown opens\n**close**      | &nbsp;         | Emit when the dropdown closes\n\n### The `open` and `close` Event of the Dropdown Picker\n\nHelp to identify the current status of the dropdown picker\n\n```javascript\n// Define a variable for logging the status\ndata () {\n  return {\n    dropdownStatus: 'closed'\n  }\n}\n```\n\n```html\n<p>Dropdown Status: I'm {{dropdownStatus}}!</p>\n\n<vue-timepicker @open=\"dropdownStatus = 'opened'\" @close=\"dropdownStatus = 'closed'\"></vue-timepicker>\n```\n\n## Contribution\n\nPlease feel free to fork and help developing. Check [CONTRIBUTING.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CONTRIBUTING.md) for more details.\n\n## Change Log\n\nDetail changes of each release: [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)\n\n## License\n\n[MIT](https://github.com/phoenixwong/vue2-timepicker/blob/master/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"0270c498b19d319b1e6f1663c8ed85030931256a","_id":"vue2-timepicker@1.0.0-beta.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-PZMLaOyb21bknb20PUlDd1AKj2vv/3XilZoxTg/azoNGqIIj3cIXd5mNparzUYPxE5L6zRJMvSX2Uui7UukFTA==","shasum":"78551ffb3885e15a499b42826f2078c1603f02cf","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.0-beta.0.tgz","fileCount":16,"unpackedSize":754475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdYR7ACRA9TVsSAnZWagAAXbsP/jyRU4C1NXRTNJ9cPNQt\ny7lMFDj27kDtiHWAIxLuwSY6GUh9Y8BkXhJdDTOS8snCOpfKDZLNeEdkU4GT\n+MhDB+mIPkkP9sNqAvFohkLdaKuZPEV+vc2QSZmt74lZ2KvQojoQVc4bnUIX\ncKKBhw3X/0no/zolInA0an/mCrCuhZPUDzeBZ7Z9DRYT/y8g+r7k04Y7lHgv\nggerFkFvvLx6ef8+inhhNKlAJrM04V8I/hOlWZEnZsEiP55ETdmoqdf+RS52\nrr4nIYXvbAaNFmIJ6Od4YPxbCmaL+wcT8QFRO0DvO1MhYxlLkQ6xETYvPL39\nwdjYkhfdgGn5ZxflOWdyKUN4iUnmVGhOnj43n7ckLJSnpM8LD3s66cTipybn\nXqQ2tllME1zeP6oHLKe00RkrgY53eRd6UKEsJKqF5KmvHsw8cgnG4ZKgqZbh\n88VO8AwG7+/7hlrbLV6EcqcR0sr4KEgoQ/FciB0bEZG3Lcdpu4scvFXGqfHe\nA5GbbbTbbipM8ctXII/G7fLlC5NFSN6Ab24Xa19BRhGFueXce2spl35mGtKG\nTY6ilD7fShf2djSb7dcBlFut/jtx57DH5/kT3TRpFtiUNOegIRwnHbDdUrgn\nJXZFGxvNdFI/h/KgQoKmBMa1qIbLiO0KpWNjlQbqXFy8mLiQ7bjT8dEDR+Vb\naGOc\r\n=dQ45\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEM1MalvrHJYp64Y0S44mkAhJR46T1jLEtXfDcbFnBACAiEArLGYoARa9D5BxF/X8lmAnNc2HGGIU+Kgzo0NOaxCCmk="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.0-beta.0_1566645952022_0.3986428854357873"},"_hasShrinkwrap":false,"deprecated":"test flight version deprecated"},"1.0.0-beta.1":{"name":"vue2-timepicker","version":"1.0.0-beta.1","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.1","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"425c5dfc16a9a34c0fdfef0179bfd1c0c14beeab","readme":"# Vue2 Timepicker  \n\n![GitHub version](https://img.shields.io/github/package-json/v/phoenixwong/vue2-timepicker?color=success&style=flat-square)\n![npm version](https://img.shields.io/npm/v/vue2-timepicker?style=flat-square)\n![GitHub release](https://img.shields.io/github/release/phoenixwong/vue2-timepicker?label=github&style=flat-square)\n![npm downloads](https://img.shields.io/npm/dm/vue2-timepicker?style=flat-square)\n\n---\n\n💡 Dead repo recharged in 2019 🔋\n\n---\n\nA dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.\n\n## Demo\n\nYou can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)\n\n## Migration\n\nPlease check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines if you are about to:\n\n- Migrate from the Vue 1.x version **[vue-time-picker](https://github.com/phoenixwong/vue-timepicker)**\n- Migrate from Bower to Yarn or NPM (Vue2 Timepicker `v0.1.x` -> `v0.2.0+`)\n\n\n## Dependencies\n\n[Vue.js](http://vuejs.org/)&nbsp;&nbsp;&nbsp;![npm peer dependency version](https://img.shields.io/npm/dependency-version/vue2-timepicker/peer/vue?style=flat-square)\n\n## Installation\n\n```bash\nyarn add vue2-timepicker\n```\n\n```bash\nnpm install vue2-timepicker --save\n```\n\n> NOTE: We stop Bower support from `0.2.0+`, please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md#migrating-from-bower-to-yarn-or-npm) for migration guidelines.\n\n## Get Started\n\n### **Step 1:** Import VueTimepicker\n\n**Option A:** Import component JS and CSS\n\n```javascript\n// Main JS (in UMD format)\nimport VueTimepicker from 'vue2-timepicker'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n```\n\n**Option B:** Choose any bundle version base on your needs\n\n```javascript\n// JAVASCRIPT\n// - CommonJS\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'\n// - UMD\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'\n// - UMD Minified\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n\n// Single File Component (the *.vue file with CSS included)\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n```\n\n**SSR Usage:** Import the single file component for SSR Usage\n\n```javascript\n// Import the *.vue file (CSS included)\n// Note the `/sfc` suffix here\nimport VueTimepicker from 'vue2-timepicker/sfc'\n```\n\n### **Step 2**: Include VueTimepicker in your component\n\n```javascript\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  ...\n})\n```\n\n### **Step 3**: Put `vue-timepicker` in your component's template\n\nThen, you can introduce the `vue-timepicker` tag anywhere you like in your component's template\n\n```html\n<vue-timepicker></vue-timepicker>\n```\n\n\n## Basic Usage\n\n### Base\n\n```html\n<!-- Default to 24-Hour format HH:mm -->\n<vue-timepicker></vue-timepicker>\n```\n\n### Customized Time Format\n\n```html\n<!-- Show seconds picker -->\n<vue-timepicker format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- 12-hour format, with AM/PM picker -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n\n<!-- 12-hour format, with seconds picker and am/pm picker -->\n<vue-timepicker format=\"hh:mm:ss a\"></vue-timepicker>\n```\n\nVueTimepicker recognizes the following tokens in the format string\n\nSection    | Token | Output\n---------- | ----- | ---------------\n**AM/PM**  | A     | AM PM\n&nbsp;     | a     | am pm\n**Hour**   | H     | 0 1 ... 22 23\n&nbsp;     | HH    | 00 01 ... 22 23\n&nbsp;     | h     | 1 2 ... 11 12\n&nbsp;     | hh    | 01 02 ... 11 12\n&nbsp;     | k     | 1 2 ... 23 24\n&nbsp;     | kk    | 01 02 ... 23 24\n**Minute** | m     | 0 1 ... 58 59\n&nbsp;     | mm    | 00 01 ... 58 59\n**Second** | s     | 0 1 ... 58 59\n&nbsp;     | ss    | 00 01 ... 58 59\n\n> If not set, the `format` string is default to \"HH:mm\"\n\n### Customized Picker Interval\n\n```html\n<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->\n<vue-timepicker :minute-interval=\"5\"></vue-timepicker>\n\n<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->\n<vue-timepicker :second-interval=\"10\"></vue-timepicker>\n\n<!-- Bind interval config with your own data variable -->\n<vue-timepicker :minute-interval=\"yourMinuteInterval\"></vue-timepicker>\n```\n\n\n## Data Binding\n\n### Bind Value with `v-model`\n\nFrom `v1.0.0+`, timepicker's `v-model` accepts value in both _Object_ (default) and _String_ format. The `v0.x` versions only support _Object_ form.\n\n#### Set Initial Value\n\nFor example, if you want to set \"10:05:00\" (\"HH:mm:ss\" format) as the initial value of vue-timepicker:\n\n```javascript\nconst yourComponent = new Vue({\n  components: { VueTimepicker },\n  data () {\n    return {\n      // Object form\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      // String form\n      yourStringTimeValue: '10:05:00',\n      ...\n    }\n  },\n  ...\n})\n```\n\nBoth forms lead to the same result.\n\n```html\n<!-- Object form -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- String form -->\n<vue-timepicker v-model=\"yourStringTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n#### Set Empty Initial Value\n\nWhen the initial value is completely unknown:\n\n```javascript\ndata () {\n  return {\n    // Will be rendered as Object form\n    yourEmptyValue: {},\n    emptyValueToo: undefined,\n    emptyValueAsWell: null,\n\n    // Will be taken into String form\n    yourEmptyStringValue: ''\n  }\n}\n```\n\n#### Set Partially-Known Initial Value\n\nFor instance, if you want to set the initial hour value to **8 pm** and leave the rest slots empty:\n\n```javascript\ndata () {\n  return {\n    // OBJECT FORM\n    // Default 24-Hour\n    timeValue: {\n      HH: '20',\n      mm: ''\n    },\n    // 12-Hour with seconds\n    timeValueWithSec: {\n      h: '8',\n      mm: '',\n      ss: '',\n      A: 'PM'\n    },\n\n    // STRING FORM\n    // Default 24-Hour + String value\n    stringTimeValue: '20:mm',\n    // 12-Hour with seconds + String value\n    stringTimeValueWithSec: '8:mm:ss PM'\n  }\n}\n```\n\n```html\n<!-- OBJECT FORM -->\n<!-- Default 24-Hour -->\n<vue-timepicker v-model=\"timeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds -->\n<vue-timepicker v-model=\"timeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n\n<!-- STRING FORM -->\n<!-- Default 24-Hour + String value -->\n<vue-timepicker v-model=\"stringTimeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds + String value -->\n<vue-timepicker v-model=\"stringTimeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n```\n\n### Get Time Picker's Current Value\n\n#### Get value from `v-model`\n\nYou can either read the binding `v-model` value anytime or add a handler to deal with the `input` event from vue-timepicker.\n\n```html\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\" @input=\"inputHandler\"></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      ...\n    }\n  },\n\n  methods: {\n    inputHandler (eventData) {\n      console.log(eventData)\n    }\n  }\n}\n\n```\n\nIn 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.\n\n```javascript\n// In `inputHandler`:\n// console.log outputs -> {HH: \"14\", mm: \"30\", ss: \"15\"}\n```\n\n### Read Data From `change` Event\n\n```html\n<!-- A: No argument -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"changeHandler\"></vue-timepicker>\n\n<!-- B: Custom arguments -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"otherChangeHandler($event, 'foo', 42)\"></vue-timepicker>\n```\n\n```javascript\n// A: No argument\nchangeHandler (eventData) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n}\n\n// B: Custom arguments\notherChangeHandler (eventData, yourArg1, yourArg2) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n  console.log(yourArg1)\n  // -> 'foo'\n  console.log(yourArg2)\n  // -> 42\n}\n```\n\nUnlike `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.\n\nIn the example above, after the user set values to \"14:30:15\" in the picker, `change` event returns the following data:\n\n```javascript\n// `@change` event data\n{\n  data: {\n    HH: \"14\",\n    H: \"14\",\n    hh: \"14\",\n    a: \"am\",\n    A: \"AM\",\n    h: \"14\",\n    kk: \"14\",\n    k: \"14\",\n    m: \"30\",\n    mm: \"30\",\n    s: \"15\",\n    ss: \"15\"\n  },\n  // extra `displayTime` added since v0.2.2\n  displayTime: \"14:30:15\"\n}\n```\n\nWhereas the `v-model` / `input` only return the data with defined tokens\n\n```javascript\n// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}\n// Hence, the `v-model` returns:\n{\n  HH: \"14\",\n  mm: \"30\",\n  ss: \"15\"\n}\n```\n\n## Advance Usage\n\n### Hide Clear Button\n\n```html\n<vue-timepicker hide-clear-button></vue-timepicker>\n```\n\nEnable to hide the \"&times;\" clear button on the right-hand side. Users can still pick new values from the dropdown, but they cannot erase any selected data.\n\n### Disable Picker\n\n```html\n<vue-timepicker disabled></vue-timepicker>\n```\n\nFully disable both dropdown picker and the \"&times;\" clear button in the UI, to prevent users from changing any values again.\n\n### Define Hour Range\n\nSometimes you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.\n\n```html\n<!-- 24-Hour Format -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\"></vue-timepicker>\n<!-- >> Equals to :hour-range=\"[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]\" -->\n\n<!-- 12-Hour Format -->\n<vue-timepicker :hour-range=\"['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']\" format=\"hh:mm a\">\n<!-- >> Equals to :hour-range=\"['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']\" -->\n```\n\n### Set Minute and Second Range\n\nSimilar to `hour-range`, you can determine values in the minutes and seconds dropdown by using `minute-range` and `second-range`.\n\n```html\n<!-- Minute range -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 00, 06, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n\n<!-- Second range -->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 0, 6, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n```\n\nWhen implemented together with `minute-interval` and `second-interval`, the customized intervals take the priority.\n\n```html\n<!-- Minute range + 5-minute interval -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\" :minute-interval=\"5\"></vue-timepicker>\n<!-- >> Active Items: 00, 10, 15, 20, 25, 30, 50 -->\n\n<!-- Second range + 10-second interval-->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\" :second-interval=\"10\"></vue-timepicker>\n<!-- >> Active Items: 0, 10, 20, 30, 50 -->\n```\n\n### Hide Disabled Items\n\nThere're four kinds of helper properties to let you hide the values excluded by `hour-range`, `minute-range`, and `second-range`.\n\n- **hide-disabled-items**: Hide **all** disabled items - hour, minute, and seconds.\n- **hide-disabled-hours**: Hide disabled **hour** values only.\n- **hide-disabled-minutes**: Hide disabled **minute** values only.\n- **hide-disabled-seconds**: Hide disabled **second** values only.\n\n```html\n<!-- `hide-disabled-hours` sample -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\" hide-disabled-hours></vue-timepicker>\n```\n\nHere 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.\n\n### Enable Debug Mode\n\n```html\n<vue-timepicker debug-mode></vue-timepicker>\n```\n\nIt'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.\n\nLet's create a \"bug\" as an example --\n\n```html\n<!-- Manual Bug Sample: Define timepicker with format \"h:mm:ss A\" -->\n<vue-timepicker v-model=\"yourStringValue\" format=\"h:mm:ss A\" debug-mode></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      // Manual Bug Sample:\n      // Should be '3:mm:05 A' but oops.. the finger slipped\n      yourStringValue: 'e:mm:05 A'\n    }\n  }\n}\n```\n\nThen, in the console window, you should see a debug log saying:\n\n```console\nDEBUG: The input string in \"v-model\" does NOT match the \"format\" pattern\nformat: h:mm:ss A\nv-model: e:mm:05 A\n```\n\n## Main Props API Overview\n\nProp                      | Type               | Required | Default Value\n------------------------- | ------------------ | -------- | -------------\n**v-model**               | _Object_, _String_ | no       | _undefined_\n**format**                | _String_           | no       | \"HH:mm\"\n**minute-interval**       | _Number_           | no       | _undefined_\n**second-interval**       | _Number_           | no       | _undefined_\n**hide-clear-button**     | _Boolean_          | no       | false\n**disabled**              | _Boolean_          | no       | false\n**hour-range**            | _Array_            | no       | _undefined_\n**minute-range**          | _Array_            | no       | _undefined_\n**second-range**          | _Array_            | no       | _undefined_\n**hide-disabled-hours**   | _Boolean_          | no       | false\n**hide-disabled-minutes** | _Boolean_          | no       | false\n**hide-disabled-seconds** | _Boolean_          | no       | false\n**hide-disabled-items**   | _Boolean_          | no       | false\n**debug-mode**            | _Boolean_          | no       | false\n\n\n## Input Props API\n\nProp                    | Type      | Required | Default Value\n----------------------- | --------- | -------- | -------------\n**id**                  | _String_  | no       | _undefined_\n**name**                | _String_  | no       | _undefined_\n**placeholder**         | _String_  | no       | _undefined_\n**input-class**         | _String_  | no       | _undefined_\n\nTimepicker now supports `id`, `name`, and `placeholder` like common form elements. Values will be assigned to the\n`<input type=\"text\" class=\"display-time\">` within the component.\n\n### Input `id` And `name`\n\n```html\n<!-- id -->\n<vue-timepicker id=\"myFirstPicker\"></vue-timepicker>\n\n<!-- name -->\n<vue-timepicker name=\"nameInForm\"></vue-timepicker>\n```\n\n### Input `placeholder`\n\nWhen `placeholder` is undefined, timepicker takes the determined format string instead.\n\n```html\n<!-- placeholder is set -->\n<vue-timepicker placeholder=\"Start Time\"></vue-timepicker>\n<!-- -> \"Start Time\" -->\n\n<!-- placeholder not set -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n<!-- -> \"hh:mm A\" -->\n\n<!-- both placeholder and format are not set -->\n<vue-timepicker></vue-timepicker>\n<!-- -> \"HH:mm\" -->\n```\n\n### The `input-class`\n\nThe `input-class` is assigned to the text input within the component as well.\n\n```html\n<!-- Set your own `input-class` in the Vue template -->\n<vue-timepicker input-class=\"my-awesome-picker\"></vue-timepicker>\n```\n\n```html\n<!-- HTML result -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time my-awesome-picker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n\n```\n\n## Events API\n\nEvent          | Arguments      | Description\n-------------- | -------------- | ----------------------\n**input**      | (_value_)      | Emit after value changes\n**change**     | (_eventData_)  | Emit after value changes\n**open**       | &nbsp;         | Emit when the dropdown opens\n**close**      | &nbsp;         | Emit when the dropdown closes\n\n### The `open` and `close` Event of the Dropdown Picker\n\nHelp to identify the current status of the dropdown picker\n\n```javascript\n// Define a variable for logging the status\ndata () {\n  return {\n    dropdownStatus: 'closed'\n  }\n}\n```\n\n```html\n<p>Dropdown Status: I'm {{dropdownStatus}}!</p>\n\n<vue-timepicker @open=\"dropdownStatus = 'opened'\" @close=\"dropdownStatus = 'closed'\"></vue-timepicker>\n```\n\n## Contribution\n\nPlease feel free to fork and help developing. Check [CONTRIBUTING.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CONTRIBUTING.md) for more details.\n\n## Change Log\n\nDetail changes of each release: [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)\n\n## License\n\n[MIT](https://github.com/phoenixwong/vue2-timepicker/blob/master/LICENSE.md)\n","readmeFilename":"README.md","_id":"vue2-timepicker@1.0.0-beta.1","_nodeVersion":"10.16.0","_npmVersion":"6.11.2","dist":{"integrity":"sha512-o6boquY15118wCJbiy80hTLTHBjtsN6ZqiIwTOOIxid+YfVGNp5ioxL5yCj72DxO5jlAyGCPJ5FxRMLxCdw1Ng==","shasum":"7b38e99a7b94a7892e80bf6a1400d63a68402e1b","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.0-beta.1.tgz","fileCount":16,"unpackedSize":809609,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZAaxCRA9TVsSAnZWagAAIVcP/0ppZ1/oQb+WBnUJYO6u\noKnFk961bcPT8xOJ0vQODws+oLKjll/P1EeY/cLrYYF1ePIW+LFXYHRE5TTD\nxTKAvkN5/JbUR38PgHzTvUkKUYMMjbWTajjYt2p+lYeGFWr0kWUZA3j/WoT8\noiMThvLgfYCaFXGKOivj8AeRYWP8c5ES4QWmy5ju6EmWCml2sBvTUsDssLXo\n1kgd/QFaIyXFISim7aan8AJRcHGTSAT/G9ocE4GWrH9eaTEoEriyjuYVBpca\nYOI5imSi3IIOhoE317z6qJrB6CfbkCkC7CmN9k2vDaU+SVjT55aew0NeNcxe\nHPI4BdPwuCnMNLof/UdyGLh8U/V65LbGAn0lll9H2uYGr3K2qv/VndGACTxz\nDSaC/W/nbAauCU9Aw7CjjtVecRpjL0ZWlL6QBoQZ448WfBjrTNHb2XMC8cn8\nB7714I1qhUXtnRa9jmx/SArv+AdP331SwkjpEcdNN/zFTcn8ISqRAz90oOsM\ngYEUEGf8DNuTKnyF4mn1WsSBqnRQt+7A3IA7LLs79KqNNwh+4JTzm7G6E1mD\noeM+D2ay+VCnf0yz2P6kscJQKv/4OoX6p82n0PLroDq5VRIOF1153LsycDc5\nocR4oX61zjzoKuk7JfiwCuLWUfBsw/8lFrl0pNKs88mqj573XBHV0KQY5ndz\nKkVw\r\n=arFa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGM/zWXj9PPaQvRKSQstD1m1thJyOrS01sVEaMESmoFAIhAImin59a5fJWPIdcj08DGTiqeHtgur6ukwd3yeV/UQk1"}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.0-beta.1_1566836401257_0.08192803608364807"},"_hasShrinkwrap":false,"deprecated":"test flight version deprecated"},"1.0.0-beta.2":{"name":"vue2-timepicker","version":"1.0.0-beta.2","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.1","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","readme":"# Vue2 Timepicker  \n\n![GitHub version](https://img.shields.io/github/package-json/v/phoenixwong/vue2-timepicker?color=success&style=flat-square)\n![npm version](https://img.shields.io/npm/v/vue2-timepicker?style=flat-square)\n![GitHub release](https://img.shields.io/github/release/phoenixwong/vue2-timepicker?label=github&style=flat-square)\n![npm downloads](https://img.shields.io/npm/dm/vue2-timepicker?style=flat-square)\n\n---\n\n💡 Dead repo recharged in 2019 🔋\n\n---\n\nA dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.\n\n## Demo\n\nYou can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)\n\n## Migration\n\nPlease check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines if you are about to:\n\n- Migrate from the Vue 1.x version **[vue-time-picker](https://github.com/phoenixwong/vue-timepicker)**\n- Migrate from Bower to Yarn or NPM (Vue2 Timepicker `v0.1.x` -> `v0.2.0+`)\n\n\n## Dependencies\n\n[Vue.js](http://vuejs.org/)&nbsp;&nbsp;&nbsp;![npm peer dependency version](https://img.shields.io/npm/dependency-version/vue2-timepicker/peer/vue?style=flat-square)\n\n## Installation\n\n```bash\nyarn add vue2-timepicker\n```\n\n```bash\nnpm install vue2-timepicker --save\n```\n\n> NOTE: We stop Bower support from `0.2.0+`, please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md#migrating-from-bower-to-yarn-or-npm) for migration guidelines.\n\n## Get Started\n\n### **Step 1:** Import VueTimepicker\n\n#### **Option A:** Import component JS and CSS\n\n```javascript\n// Main JS (in UMD format)\nimport VueTimepicker from 'vue2-timepicker'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n```\n\n#### **Option B:** Choose any bundle version base on your needs\n\n**Javascript**\n\n```javascript\n// CommonJS\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'\n// UMD\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'\n// UMD Minified\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'\n```\n\n**CSS**\n\n```css\n@import 'vue2-timepicker/dist/VueTimepicker.css';\n\n/* Or, with node_module alias path like: */\n@import '~vue2-timepicker/dist/VueTimepicker.css';\n\n/*\n  NOTE: the path alias to `node_modules` differs between bundlers.\n  Please change the `~` to any alias that works with your environment.\n */\n```\n\n**Single File Component**\n\n```javascript\n// The *.vue file with CSS included\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n// NOTE: It might require additional workarounds in the bundler config in some cases\n```\n\n#### **SSR Usage**\n\n```javascript\n// Import the *.vue file (CSS included)\nimport VueTimepicker from 'vue2-timepicker/sfc'\n// Note the `/sfc` suffix here\n```\n\n### **Step 2**: Include VueTimepicker in your component\n\n```javascript\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  ...\n})\n```\n\n### **Step 3**: Put `vue-timepicker` in your component's template\n\nThen, you can introduce the `vue-timepicker` tag anywhere you like in your component's template\n\n```html\n<vue-timepicker></vue-timepicker>\n```\n\n\n## Basic Usage\n\n### Base\n\n```html\n<!-- Default to 24-Hour format HH:mm -->\n<vue-timepicker></vue-timepicker>\n```\n\n### Customized Time Format\n\n```html\n<!-- Show seconds picker -->\n<vue-timepicker format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- 12-hour format, with AM/PM picker -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n\n<!-- 12-hour format, with seconds picker and am/pm picker -->\n<vue-timepicker format=\"hh:mm:ss a\"></vue-timepicker>\n```\n\nVueTimepicker recognizes the following tokens in the format string\n\nSection    | Token | Output\n---------- | ----- | ---------------\n**AM/PM**  | A     | AM PM\n&nbsp;     | a     | am pm\n**Hour**   | H     | 0 1 ... 22 23\n&nbsp;     | HH    | 00 01 ... 22 23\n&nbsp;     | h     | 1 2 ... 11 12\n&nbsp;     | hh    | 01 02 ... 11 12\n&nbsp;     | k     | 1 2 ... 23 24\n&nbsp;     | kk    | 01 02 ... 23 24\n**Minute** | m     | 0 1 ... 58 59\n&nbsp;     | mm    | 00 01 ... 58 59\n**Second** | s     | 0 1 ... 58 59\n&nbsp;     | ss    | 00 01 ... 58 59\n\n> If not set, the `format` string is default to \"HH:mm\"\n\n### Customized Picker Interval\n\n```html\n<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->\n<vue-timepicker :minute-interval=\"5\"></vue-timepicker>\n\n<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->\n<vue-timepicker :second-interval=\"10\"></vue-timepicker>\n\n<!-- Bind interval config with your own data variable -->\n<vue-timepicker :minute-interval=\"yourMinuteInterval\"></vue-timepicker>\n```\n\n\n## Data Binding\n\n### Bind Value with `v-model`\n\nFrom `v1.0.0+`, timepicker's `v-model` accepts value in both _Object_ (default) and _String_ format. The `v0.x` versions only support _Object_ form.\n\n#### Set Initial Value\n\nFor example, if you want to set \"10:05:00\" (\"HH:mm:ss\" format) as the initial value of vue-timepicker:\n\n```javascript\nconst yourComponent = new Vue({\n  components: { VueTimepicker },\n  data () {\n    return {\n      // Object form\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      // String form\n      yourStringTimeValue: '10:05:00',\n      ...\n    }\n  },\n  ...\n})\n```\n\nBoth forms lead to the same result.\n\n```html\n<!-- Object form -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- String form -->\n<vue-timepicker v-model=\"yourStringTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n#### Set Empty Initial Value\n\nWhen the initial value is completely unknown:\n\n```javascript\ndata () {\n  return {\n    // Will be rendered as Object form\n    yourEmptyValue: {},\n    emptyValueToo: undefined,\n    emptyValueAsWell: null,\n\n    // Will be taken into String form\n    yourEmptyStringValue: ''\n  }\n}\n```\n\n#### Set Partially-Known Initial Value\n\nFor instance, if you want to set the initial hour value to **8 pm** and leave the rest slots empty:\n\n```javascript\ndata () {\n  return {\n    // OBJECT FORM\n    // Default 24-Hour\n    timeValue: {\n      HH: '20',\n      mm: ''\n    },\n    // 12-Hour with seconds\n    timeValueWithSec: {\n      h: '8',\n      mm: '',\n      ss: '',\n      A: 'PM'\n    },\n\n    // STRING FORM\n    // Default 24-Hour + String value\n    stringTimeValue: '20:mm',\n    // 12-Hour with seconds + String value\n    stringTimeValueWithSec: '8:mm:ss PM'\n  }\n}\n```\n\n```html\n<!-- OBJECT FORM -->\n<!-- Default 24-Hour -->\n<vue-timepicker v-model=\"timeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds -->\n<vue-timepicker v-model=\"timeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n\n<!-- STRING FORM -->\n<!-- Default 24-Hour + String value -->\n<vue-timepicker v-model=\"stringTimeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds + String value -->\n<vue-timepicker v-model=\"stringTimeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n```\n\n### Get Time Picker's Current Value\n\n#### Get value from `v-model`\n\nYou can either read the binding `v-model` value anytime or add a handler to deal with the `input` event from vue-timepicker.\n\n```html\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\" @input=\"inputHandler\"></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      ...\n    }\n  },\n\n  methods: {\n    inputHandler (eventData) {\n      console.log(eventData)\n    }\n  }\n}\n\n```\n\nIn 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.\n\n```javascript\n// In `inputHandler`:\n// console.log outputs -> {HH: \"14\", mm: \"30\", ss: \"15\"}\n```\n\n### Read Data From `change` Event\n\n```html\n<!-- A: No argument -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"changeHandler\"></vue-timepicker>\n\n<!-- B: Custom arguments -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"otherChangeHandler($event, 'foo', 42)\"></vue-timepicker>\n```\n\n```javascript\n// A: No argument\nchangeHandler (eventData) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n}\n\n// B: Custom arguments\notherChangeHandler (eventData, yourArg1, yourArg2) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n  console.log(yourArg1)\n  // -> 'foo'\n  console.log(yourArg2)\n  // -> 42\n}\n```\n\nUnlike `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.\n\nIn the example above, after the user set values to \"14:30:15\" in the picker, `change` event returns the following data:\n\n```javascript\n// `@change` event data\n{\n  data: {\n    HH: \"14\",\n    H: \"14\",\n    hh: \"14\",\n    a: \"am\",\n    A: \"AM\",\n    h: \"14\",\n    kk: \"14\",\n    k: \"14\",\n    m: \"30\",\n    mm: \"30\",\n    s: \"15\",\n    ss: \"15\"\n  },\n  // extra `displayTime` added since v0.2.2\n  displayTime: \"14:30:15\"\n}\n```\n\nWhereas the `v-model` / `input` only return the data with defined tokens\n\n```javascript\n// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}\n// Hence, the `v-model` returns:\n{\n  HH: \"14\",\n  mm: \"30\",\n  ss: \"15\"\n}\n```\n\n## Advance Usage\n\n### Hide Clear Button\n\n```html\n<vue-timepicker hide-clear-button></vue-timepicker>\n```\n\nEnable to hide the \"&times;\" clear button on the right-hand side. Users can still pick new values from the dropdown, but they cannot erase any selected data.\n\n### Disable Picker\n\n```html\n<vue-timepicker disabled></vue-timepicker>\n```\n\nFully disable both dropdown picker and the \"&times;\" clear button in the UI, to prevent users from changing any values again.\n\n### Close on Complete\n\nAutomatically close the dropdown when the user finishes selecting **all** of the required fields.\n\n```html\n<vue-timepicker close-on-complete></vue-timepicker>\n```\n\n### Define Hour Range\n\nSometimes you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.\n\n```html\n<!-- 24-Hour Format -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\"></vue-timepicker>\n<!-- >> Equals to :hour-range=\"[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]\" -->\n\n<!-- 12-Hour Format -->\n<vue-timepicker :hour-range=\"['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']\" format=\"hh:mm a\">\n<!-- >> Equals to :hour-range=\"['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']\" -->\n```\n\n### Set Minute and Second Range\n\nSimilar to `hour-range`, you can determine values in the minutes and seconds dropdown by using `minute-range` and `second-range`.\n\n```html\n<!-- Minute range -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 00, 06, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n\n<!-- Second range -->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 0, 6, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n```\n\nWhen implemented together with `minute-interval` and `second-interval`, the customized intervals take the priority.\n\n```html\n<!-- Minute range + 5-minute interval -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\" :minute-interval=\"5\"></vue-timepicker>\n<!-- >> Active Items: 00, 10, 15, 20, 25, 30, 50 -->\n\n<!-- Second range + 10-second interval-->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\" :second-interval=\"10\"></vue-timepicker>\n<!-- >> Active Items: 0, 10, 20, 30, 50 -->\n```\n\n### Hide Disabled Items\n\nThere're four kinds of helper properties to let you hide the values excluded by `hour-range`, `minute-range`, and `second-range`.\n\n- **hide-disabled-items**: Hide **all** disabled items - hour, minute, and seconds.\n- **hide-disabled-hours**: Hide disabled **hour** values only.\n- **hide-disabled-minutes**: Hide disabled **minute** values only.\n- **hide-disabled-seconds**: Hide disabled **second** values only.\n\n```html\n<!-- `hide-disabled-hours` sample -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\" hide-disabled-hours></vue-timepicker>\n```\n\nHere 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.\n\n### Advanced Keyboard Support\n\nBasic keyboard support includes:\n\n- **Tab**: Focus or blur the Timepicker\n- **Esc**: Close the dropdown\n\nAdvance Keyboard support (enabled with `advanced-keyboard`):\n\n- **Arrow Keys**: Navigate between valid (non-disabled) values and columns\n- **Space** or **Enter**: Select the focusing item\n\n```html\n<vue-timepicker advanced-keyboard></vue-timepicker>\n```\n\nPlease 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.\n\n### Blur Delay\n\n```html\n<!-- Unit: million second -->\n<vue-timepicker :blur-delay=\"300\"></vue-timepicker>\n```\n\nSets the blur delay time for keyboard navigation. Defaults to `200` if not set.\n\n\n### Enable Debug Mode\n\n```html\n<vue-timepicker debug-mode></vue-timepicker>\n```\n\nIt'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.\n\nLet's create a \"bug\" here as an example --\n\n```html\n<!-- Manual Bug Sample: Define timepicker with format \"h:mm:ss A\" -->\n<vue-timepicker v-model=\"yourStringValue\" format=\"h:mm:ss A\" debug-mode></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      // Manual Bug Sample:\n      // Should be '3:mm:05 A' but oops.. the finger slipped\n      yourStringValue: 'e:mm:05 A'\n    }\n  }\n}\n```\n\nThen, in the console window, you should see a debug log saying:\n\n```console\nDEBUG: The input string in \"v-model\" does NOT match the \"format\" pattern\nformat: h:mm:ss A\nv-model: e:mm:05 A\n```\n\n## Main Props API Overview\n\nProp                      | Type               | Required | Default Value\n------------------------- | ------------------ | -------- | -------------\n**v-model**               | _Object_, _String_ | no       | _undefined_\n**format**                | _String_           | no       | \"HH:mm\"\n**minute-interval**       | _Number_           | no       | _undefined_\n**second-interval**       | _Number_           | no       | _undefined_\n**hide-clear-button**     | _Boolean_          | no       | false\n**disabled**              | _Boolean_          | no       | false\n**close-on-complete**     | _Boolean_          | no       | false\n**hour-range**            | _Array_            | no       | _undefined_\n**minute-range**          | _Array_            | no       | _undefined_\n**second-range**          | _Array_            | no       | _undefined_\n**hide-disabled-hours**   | _Boolean_          | no       | false\n**hide-disabled-minutes** | _Boolean_          | no       | false\n**hide-disabled-seconds** | _Boolean_          | no       | false\n**hide-disabled-items**   | _Boolean_          | no       | false\n**advanced-keyboard**     | _Boolean_          | no       | false\n**blur-delay**            | _Number_           | no       | 200\n**debug-mode**            | _Boolean_          | no       | false\n\n\n## Input Props API\n\nProp                    | Type      | Required | Default Value\n----------------------- | --------- | -------- | -------------\n**id**                  | _String_  | no       | _undefined_\n**name**                | _String_  | no       | _undefined_\n**placeholder**         | _String_  | no       | _undefined_\n**tabindex**            | _Number_  | no       | 0\n**input-class**         | _String_  | no       | _undefined_\n\nTimepicker now supports `id`, `name`, `placeholder`, and `tabindex` like common form elements. These values are assigned to the\n`<input type=\"text\" class=\"display-time\">` within the component.\n\n### Input `id`, `name` and `tabindex`\n\n```html\n<!-- id -->\n<vue-timepicker id=\"myFirstPicker\"></vue-timepicker>\n\n<!-- name -->\n<vue-timepicker name=\"nameInForm\"></vue-timepicker>\n\n<!-- tabindex -->\n<vue-timepicker :tabindex=\"5\"></vue-timepicker>\n```\n\n### Input `placeholder`\n\nWhen `placeholder` is undefined, timepicker takes the determined format string instead.\n\n```html\n<!-- placeholder is set -->\n<vue-timepicker placeholder=\"Start Time\"></vue-timepicker>\n<!-- -> \"Start Time\" -->\n\n<!-- placeholder not set -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n<!-- -> \"hh:mm A\" -->\n\n<!-- both placeholder and format are not set -->\n<vue-timepicker></vue-timepicker>\n<!-- -> \"HH:mm\" -->\n```\n\n### The `input-class`\n\nThe `input-class` is assigned to the text input within the component as well.\n\n```html\n<!-- Set your own `input-class` in the Vue template -->\n<vue-timepicker input-class=\"my-awesome-picker\"></vue-timepicker>\n```\n\n```html\n<!-- HTML result -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time my-awesome-picker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n\n```\n\n## Events API\n\nEvent          | Arguments      | Description\n-------------- | -------------- | ----------------------\n**input**      | (_value_)      | Emit after value changes\n**change**     | (_eventData_)  | Emit after value changes\n**open**       | &nbsp;         | Emit when the dropdown opens\n**close**      | &nbsp;         | Emit when the dropdown closes\n\n### The `open` and `close` Event of the Dropdown Picker\n\nHelp to identify the current status of the dropdown picker\n\n```javascript\n// Define a variable for logging the status\ndata () {\n  return {\n    dropdownStatus: 'closed'\n  }\n}\n```\n\n```html\n<p>Dropdown Status: I'm {{dropdownStatus}}!</p>\n\n<vue-timepicker @open=\"dropdownStatus = 'opened'\" @close=\"dropdownStatus = 'closed'\"></vue-timepicker>\n```\n\n## Contribution\n\nPlease feel free to fork and help developing. Check [CONTRIBUTING.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CONTRIBUTING.md) for more details.\n\n## Change Log\n\nDetail changes of each release: [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)\n\n## License\n\n[MIT](https://github.com/phoenixwong/vue2-timepicker/blob/master/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"1b8a1e3b0cda80094f6b1cc340a5511056a91b79","_id":"vue2-timepicker@1.0.0-beta.2","_nodeVersion":"10.16.0","_npmVersion":"6.11.2","dist":{"integrity":"sha512-b0lEcvaYPgp//cUfkXOThqlQw+0q2Cbkd1/cia1YrU+A4kcdQk3RUG5qDuX33OFXuL0GBwgFmQlncQB8NN+k8A==","shasum":"497b7d4233fa003a77361bb4fca0da20fbd7c371","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.0-beta.2.tgz","fileCount":16,"unpackedSize":965717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJda4AGCRA9TVsSAnZWagAAxMoQAI3bhWc9SYDZrTHXh+sM\nF4Tw29Snj3iie/dO7iWm/aMXeB4EQq7oaADQEE85NwzGqV7z3PhNJ82Cppi3\nSkgbTs07GDOqOO5Sot8hsDsoNmw08ISgy1TKwBa7S6UwvCE5TojurtxS3TAF\neYmWlaYNfDFqYYPshXIQtgYL+Sv6kw+0bOOGzORsOv4hXQ8JqLotRvs6B+Sw\n+likmpNWA5HET8ghBhFWeeHhMwWlXArCdFv4EPt5kD1xqW3ummWm2vUdyQmW\nchBWo+Z1b8gyRgmZdISVTO1c+MTM8O/gsKFIh6QA6xdYkiBpyP38vO7K3KsH\n3k2ggiNKwqzKefK6lNyweWgi08OGupZ8oF+UvsOcJ1jQGmFovBVDTPCZGUp5\n6LBo139QvYiUY6jC3WIv0+z70Z9hi5Zns+H4dAGWKjcdIQ9IMWXNwaueuBsV\n4+s5+R1v3XpCPLUjYicb6i8PbtDa1wuL4lMybf9+uabBu+JhlWfszr2BJq/g\nIpAhs1VY9TyINU/EClvBUA/2xfgRaNF97A29cRC+RNHg8uFoqG2oFGW1BsUx\nTw0kIHE98GlVumKV07eU0GsG3YuwW2DDA7WvRkuAw/UEnZvYzuBBWmxOhEBs\n6mOFmt9oWfOTpEYmpU2If+uilQPtugMwgDO3aWK0/4m8iSX67AROgTyOl5tZ\nju59\r\n=SiVF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhR8uZ6ENzQbwQt407YqyswYQ2+rJxk+YUonN8moPlEAiEAgIiDROz9kwF3p4JTgsR7flSmlK4nDJkHdkaLEH5vzMI="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.0-beta.2_1567326213908_0.6357587961491173"},"_hasShrinkwrap":false,"deprecated":"test flight version deprecated"},"1.0.0":{"name":"vue2-timepicker","version":"1.0.0","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"ea702e7ac1c529c006cfc5806844e084be80ee8c","_id":"vue2-timepicker@1.0.0","_nodeVersion":"10.16.0","_npmVersion":"6.11.2","dist":{"integrity":"sha512-fih/YZ2U9CXz+CpXvk2k56Ayh4yDFZJXY6Zokm4WOiR9tfKeBZYoqTyoXScLQlqn7Y43sFcGFdOk1MBYEa2a1g==","shasum":"7865c18c54e2e6b0d266fcde18d1e44e19be40c3","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.0.tgz","fileCount":16,"unpackedSize":967956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdfLBpCRA9TVsSAnZWagAArbQP/jCAVJL7sTIhVcO6qTwS\n62lsKazEJ33lNNALDiwSoEV6ux/eU92f77TV66l81HSOCv4yjRXK2cfr/75n\niJZlhxj6SA6iIpPHts7wAxCzSHrMGN9+sZgbGwjvwcIh5l2eMALDeL39oINs\n2gi9MqrAwePpW8STY5SquPHfPDbJHeUlLONlZbj+i4NhYcZ1fvY/ptE9Ncdh\nb+kyUZeveiEZ8Wmc5LsJQVXXRMraAM29yB1DGPdBXUEgXTP+vhG9lB04vUwY\ncHoxpaTkYef2b0aU00QR6z2hpHiMMzU9SaE4niEWXZanfqxeb0HKb4FYT3Km\nicM7ipRcutmAZ1vr0EjFRPPbwaak0aNQSuK4xOXnatfLmbJbs3IfHCGNino4\nKbrNxOhTjNSC/fgCMY8xcGP1edg0dQ/u84OLWWOaUirfQy7pzsyRKZJuIeAI\nUiO853Se2jgTWWkMVNX2KCDdrvk88Bm2M/MelKXw959UMA+QqzDcDOeVZ7Vt\n0RIZek48YNX4sveIxDh4B97GEBiBONfKVX7/8Lj8ALr4yhxwehU6R8A3XoTQ\n7mkdKUi1R/WHI6YSomHsPBZcDyhY13nwQ3L3ZzJXRSwcqJFcGrsls0qEfGKU\nOCM4tA9CiQpxmHXZ35ZbQskSm9RJbHhzSh63mlI5hjVro+duVmGNduwqQwj3\noopI\r\n=OtEb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDq5FlWL5N9amYCHENjQV0c59q/MUmuHeEZAdg+rWr9AAiBx5FUQPrvPXFDqK7EyUjWylvbXWaCKAUjQERSX9tUmNg=="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.0_1568452712878_0.28000607708124003"},"_hasShrinkwrap":false},"1.0.1":{"name":"vue2-timepicker","version":"1.0.1","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"973517402a1d3feb7c64d3310774634ee6d62daa","_id":"vue2-timepicker@1.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.11.2","dist":{"integrity":"sha512-kmyPsEjV1NWUStRdtQ5xtwiJ+Cg9L5wnWAFaLAHVrFVrJNynWTsXypRVkdI8ICvl2jaQDaQE0Aojna5yVgB4qw==","shasum":"67f449471791275731396db57844a83593100513","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.1.tgz","fileCount":16,"unpackedSize":977199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkMdyCRA9TVsSAnZWagAAblQQAJcrWteH2McCm4ANTnD6\noz6Pc8AnPGqbYENF5DOp/LStmi+CsNJdfuCKfrQpY3ZqhrSAS0i95Xx+NxvL\ntcEcQo8E5Rmae0GKLhw0AnaRbRjG5jYQdlYxcfTehcmnsFN8iLzReRnxdXQr\nl4Xv3+7rnw/qoc/oT+eQMaPekLSXUNuTYy7UGHqrSP/ckyNZqFblA1QHpz9m\n3NxReczDbfF790CgtNVRLhJQ9W9X2TYIS6BON+914j4wbH/r6OWFLp6hprSX\nlR4CqPN6SKL+5x4l5xrCBxb5f6ZOoufkPK3EMlJoyka4ceJUxe2MSWLcZqvc\nbVb3nroilqhHlQiX3+V21ckCJqiI/OEosIMG6i8RLxM+ue/I+GWF9xIro6Ir\nxdI1//702Khs7URrAq+wWdwPVAvr5wWhRUzFwxZhLvkiMkGr4POLgRYqGZSZ\nclNKOit8FdDp1sqyvHJEc+GBCtE09pcy0sWl6BDUOYnu8qZdYFZnndtzuc/q\nZc6uT01WkGpY0CtCa2L+phPhh+SHeYiQ4JcoTmGorSCL/bIXCgENCpDv7AK9\nqqF14ISn1GbjwXvqAv9Ba9P9tagzGM9UzMuwau1hbpop+7Ul7DlwOLmjtClP\nflz8p9Cx5+qj0JiQyjBVIgHODKmYAzEOu+9rAMOtzXzVI4X2tIg9AeVLFE9w\ngGo2\r\n=uW0Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsqUFKe6W46nSPgxmASs/gnGQrSiBUSfZpdnYaJftSWQIhAL8wfnnyduQhbi/t7wthXla493wA6HgX7o6+4fT5OUAe"}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.1_1569769329273_0.8089726601146363"},"_hasShrinkwrap":false},"1.0.2":{"name":"vue2-timepicker","version":"1.0.2","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"c72a973f7e204a75a766f4fb1c44e93cca0c94d7","_id":"vue2-timepicker@1.0.2","_nodeVersion":"10.16.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-DDBP0kHlWlHa7E/xGyElyjt4f5frFRaYJAQFjv5dxDHZ/SGJd0L9FEZFYgtw48s0hhBojU5YPpm/FPXdcxI8+Q==","shasum":"0f61ed7704a8110c2c684398680fd7a62977f892","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.2.tgz","fileCount":16,"unpackedSize":992313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrUUBCRA9TVsSAnZWagAAm9oP/i/aUV5WvDmMECWYGNM2\nixm2ASUlHZTPmkWN59KtSSS+jPvdKRDsP61gPcxZE1wrZ+1kQ3fihRFfeFbc\nk69ztyaTZmGQxLJJBtk5rNwS6hDru8Wzx2CJf3QzctSzxyVolu+M0BEYF9v2\n1m/WxDEKuTfIKFTYImzgaZMIzNhVwpyIkNSDTJhcSJfH3OGW6Tjy213dSoBr\nMdrAgJaFnJ8b7XB8d+Gy1gMH++pOs1zKM7ZwLqPpTxsHTfbUFmqMG6+/pPzY\napn3X41BSYYqpb2VbQo9Fh6MkXXh1whKYtZPk4NpQsXVi7LwlJM9SmobTTm3\nM79aVfBIXjowaix8XlEtywLsMxCJ7hUdc4r3sR9uRPPcFPuA+EOhU0WMplAL\nfFQHk4JgsTs73ccOcC7TcVIqXhLGhSHJ3zSJ3WivNsGa3Mug3M3gdJeJY6xh\nmDfVGpAT/tzu/jP7Tl/Vz7X5BU2/JVrn2V0eFipMx6CP64KPX0eUByfdT5F/\nLBtgGUC4Qhgr19Yrx7qogegMMcS4aTq+42NAysqOJrhcdHOtnsqFZAkuQE8U\ndBL0qjzvLPuhxc5alyL8zjrOTl/X03d8zybqL+AVTolp0UcgdaABd7Jc5cqo\nvNfGNLFheiU4sFBZ7nR2//4Z56/zbSRCuA3XIB2HGAyN9R+VpAczReKGiQK4\nu6U5\r\n=vxKj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC98PH0PkQiZ0UMRarT0l786LshFDtTuSrYfan2xLZv9AiEAkk6HoikGSO3xIYqvZCmlKFFejLJizMEneSV020nFEtw="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.2_1571636480304_0.6574554537265096"},"_hasShrinkwrap":false},"1.0.3":{"name":"vue2-timepicker","version":"1.0.3","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"c9010d6af82f4d6187f911c6a2f1f36e76ff64c4","_id":"vue2-timepicker@1.0.3","_nodeVersion":"10.16.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-NV+0aWD2V8JWTvaV9VzcTVPpg3X1OtKDxtnI0tm0vEfpbOWd5M7LQb0QVnVE0k+NufDKdqvaIMqvN3Gryj3fIg==","shasum":"35c5385d8e92c25d14913a9fe4b0f0fbe4b370e3","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.3.tgz","fileCount":16,"unpackedSize":999533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsbacCRA9TVsSAnZWagAAJskP/RwNtYMF6c5UNrviP5yq\nCcc6DkZp0Tkfz+DZU/qDBsMjZuMAEb9ugExlxgLvnAT+LQVsXME05HBVb1lO\nmWAIqadUQaUNq5wGFBjD7jjtqSwxwaV7fv9hXR3YVQC1B8UFp9aMGFlDAF31\nexPuZY9ZwXtzg93K4Ulz1lg0cEW+Z1N37De1VcrVy4YiHo5KafbSI9FnUFj1\nFMy9TBjweidkOfqd+MY/jPeI8yH8KpkXmtz+Z9t4SaEYfUlEq6sfDfYahfQ0\nC3eSRqGPYYrcJDP1tsTGpMVfgmFDCuupzCHZfF3efEtajbQpBMQjIq/Ke2xy\nLLeSGs1J/BsW1lxSESdt1roWDMZm3HDdJXM2hJm5jmJl+rkmjnaNyua5wB5A\nnRfTZ3/BMOgoDTplzaY+K0Exaurrh5bq7VgS5RLCW06bQsE7zyYgszBQbzdk\nLjFHPp6aMjjzR8JxN0xbRDtqmtFj763mfbkmCY8M2S+dK7TIy0sJLnrEYv1g\n9LLgHf81ylYOHRIt4YDsG49F6eHPBqq8xYg1IOQy299GbGKKWadjGtl5IBmE\n/8uxM5bPk6GVxdzpSDCs6l4BIuWYCVtZZXamPbM1yjwTRwlqqaHgYn4f2Bn7\nRPau7tC7f9QycQg7ytDRvJqHIbT/hKGMUy0ltDKh4Vg3YMmlXKVf1S6FxIxn\nzcN1\r\n=Za+F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFMieHCC0yibWQ4lqxdmdm4uMOVPblj+/R4WbrzFGrmkAiEA1DtaeTFUwGU8tD0fW/XFVTLCvkeRzT2DY5aHxGeZCqA="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.3_1571927707742_0.6205729891961325"},"_hasShrinkwrap":false},"1.0.4":{"name":"vue2-timepicker","version":"1.0.4","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"9cf7af4ee121b199419ad466c8dc071e05cf4c3f","_id":"vue2-timepicker@1.0.4","_nodeVersion":"10.16.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-ALAmY9gjwX1TXKrG9zPRXYj4SqeghvDsE0UC1bI2MOCNDH++VdAyXO7RiE1k+YdXd94MMuJy/lZxYgWh4lB79Q==","shasum":"8cc3e45c47d8376093346c995d6abaa84ca96abf","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.4.tgz","fileCount":16,"unpackedSize":1307852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvaNcCRA9TVsSAnZWagAATA8QAKHhWzzDu3FlObpaxGwP\n2aNYgG/Y6gqu/ql2bYwQ4Znp7szQQJfY5/9fLppDpwU5d5ZnZF8cQeQzgXO/\n/2J+XgpEu1dsMCljL1kDSJ9HpIU9tL9aNu/ZOyEOG7m8//xgsn6ND0w0qlpz\nXG2id3u+baoclrZKziuAhvoxDAGLDOUJJ6z8vHiX3fK5UMekmEqRnW3+wCMH\nxy0oQlyTF2+0DsdIrpLNPgdVpjEIOhWBlc2kWEOlVlXf+oK2Yo3UwpRYv9CW\nz+a7jk3BzdUiN9AM+IhfjpLbvBGiFTNz2qzE+TjwhyUeovDURfvGC09ogIi8\nkQcBXFd43bKHgfLgQudKZz/uTQqi3KlpDzygyq62DUjzoI1SmvMcQMLFcRvu\nqUqtDFLPUufSRBL6I+H3jKg1u35MR6b6htzs0FQ1lJ88MAV8UhbVSO8bElKy\nZ0y33CQ3mdCQtPWd3xWY6qMNk7Pkk4MFWrfjp67OLJOcn0mOlvUXIkWrDQhH\n8qx2o3gzVeXRtqm1YI4yLBBF6louePCNJaPD79lUhnSyKVgpO6f7T6NvdAVa\ntsqdxc5+pHqQdMFovYLLb2FpxQg4vPxGkO4aE/ElQMQPlcbhd8eklml/OyWq\nh1G+Pv7SNWu6y9Eyoa4qRPIunK7F8nq28ACWHDAYtBRHQhhNDcloaQ4Y/7iD\n4mM3\r\n=hrGr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZ87yT9SC2Ef/VsADVsMSMum8bgTHL/SXjQYpyaTo7hAiA0oITphgPQgM1IVaNfyFZIeNM4JJTOAwB65pJHOUOM4g=="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.4_1572709211596_0.7728396756621789"},"_hasShrinkwrap":false},"1.0.5":{"name":"vue2-timepicker","version":"1.0.5","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"09c0e93c58f8b4f4dfbf4e97a79496091d65e433","_id":"vue2-timepicker@1.0.5","_nodeVersion":"10.16.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-12o26Y4RuUp+D6E0vBNhvHhP7Pod9JI4oKfwf7+tWMZ1b0G3FEZyClBJ17epR7OCFOB9oefLjPSkIxzMceYFRg==","shasum":"1177c577bcebc847434812d0d05fe105eda9dde0","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.5.tgz","fileCount":16,"unpackedSize":1310919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7KxcCRA9TVsSAnZWagAAy0YP/3Hij82hT7hHsqeMxqro\nBnehJsdnc1sa0ZivLCrkWDQ168JjgP31ZfiqSju8pbypIU4DI+vCp6xVAPwI\nMBe8MsH+ot8SEvV0YMqL3FhiFmZ1Xxzl0WqJCx5y1/xtgq7BTT5Gvh/BohHe\nh3DagQ5YZ74/z1i8q0n9+X0gwX70j6AgUJfnO+1AIdGY+zM+gcD4NHiwbAhh\n0MCUVCEGy8+X+cqB746WGlPPsnRhwZolRp8xObpYf/hiSnrzV5sMursxurk3\nfUkPbhM05Bpk3YO2lyP+W8Z0mVV5nIR6/NZYQOR20je3SrGEo5/Me8hTpIkJ\nTTgQgVa6R+Kgt2YAm4vHZ6sJ18W8zsPIETwcVLPokz+R8GifRTesGcn+zpqb\njIW7QsIZFQjbcx3xgu8y1G2qhyB9QFqFd1vfhpMnHEtiQ2uaD25ZfnkpmBUE\nhZGZfiy1BHLC35qn+ATdfbqoCRKC/zUxgD1Z3VP3wtOaZRjwnbNAFcmtTDOs\nQ8lmkfzDXxStJaEl/TKGzQfb3rmClHm0kj6TUMRvQORuhWlU2YqP94gd87Vp\nEAqYvcPrzKPuIkfVG2OcnA7pCBueTeoymStGHYpt2jVe5Z5FbxGGFNML2Hfx\n9wD8Rh47suzu7VIC4aCaN34u4swAOvD4ShDBtgYxQQeXAnclPIpOGEhq3M63\n6DOt\r\n=XATY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtky4DRp9/F5siIc1WG/azHBGQ4SorOrdW5opgjiTS2wIhANnFjVzxN3H+XuZqNI8N1mG6937kmWd8aojN/zm9QPU8"}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.5_1575791707945_0.2783275949493895"},"_hasShrinkwrap":false},"1.0.6":{"name":"vue2-timepicker","version":"1.0.6","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"4a673c07cd0d45e0b37f48534c24b327c1eff679","_id":"vue2-timepicker@1.0.6","_nodeVersion":"10.16.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-fhb/i43471Ex7dVdTbbtiCpjTdZ1FNu4yi5AXqOhxhqVuJGtwW+yVeSbGljphbpAq2NmABZJWVBytUivETxjrA==","shasum":"8e291f868a33af473159eb38df4ba9778c88098e","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.6.tgz","fileCount":16,"unpackedSize":1327291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9fnACRA9TVsSAnZWagAA1LkQAJxYFrAn30TBoLJlAuOC\nBtvS+6dv/lJSKzE0wxE6THsfNr45LtMZOX7oDKkwdUPf4ytGbaLHK7ztZYK7\nVr5ZbrvEbhlqmZggCQ4tSIu0gK/3HqSkAwnjSqPdRsV9FNFZ9jKYwRPfkzvw\nQWfBbPjIc4uv1RgICIh3C21jpwh4HIT2AIarOOenXPtmvsF/fK3LNBfQiMnf\nxsQvoyq125rWaXW23xKRvleju6b4KBTxmfIAsiM+emjgd1lmnLbfAM8Mhoji\ndiE6BLVai6T9N2COyyesxqhqbVuqiGvOGYdCaLzQNi07jOL9UDXMdNH1YnWo\nQ1N4ketdysYI/4iQYXairVexe1XPiZob7uhNDeMPx9YagH/3tiUVHFAnF470\nMVkSDonEPTIyIarD/zsqLuZWLQD0o32BfO8KuW5GP46+9828sHSX2/s7apNI\nJzhaVtffCJZw3fvp0AFo0NW3Ij9jDfexrmpkUVFmFph/V82qYY7VwA2/4XLg\nX+S6RLHK3jp+8N2aDAcKvFLJjy/pkQU259c7opl2EbFsFxNHDkwTe1mUHoT5\nsNkymq6CH9/dwcZoUB0xGRUpF3r76GC4OiwTkz/9DiBmKAhDqqr+nf6tCBNC\nBDic5gaFWytLn7itr0P5S7RnxCYJJ+0QDgxSOIdzkuEj80EBNBH9X5uUOchw\noIuh\r\n=vEQe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDofAYLP1H75/RkuQzTrdOxibv4+lSf2/E4pAwWgfiG2QIgSl1njMWQdMv9Enck1aq23dHIrAas/hMxus29vi5MLMs="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.6_1576401344267_0.7012673677869401"},"_hasShrinkwrap":false},"1.0.7":{"name":"vue2-timepicker","version":"1.0.7","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"f539f469a9d4cec1c6ea175343109c2c9fad3c34","_id":"vue2-timepicker@1.0.7","_nodeVersion":"10.16.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-QfiJY2BuoBM9zvsE/WoClZEbQHUlWQrCrhJZDw9r1uGqHmqjKepOxjYYdW39pm+H+0vrgdY4NvlFzrvWQr/KBQ==","shasum":"5180aab992056e0516be74bbfd8a1f221a2b0a9c","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.7.tgz","fileCount":16,"unpackedSize":1328206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/4/pCRA9TVsSAnZWagAAJvsP/RVkP0pkWtCAFaYdp6om\n8/1E8saDbkisXNV5X6lbws6XmYx2Bk3jOMyVLn6AF3emLTZ5+DB9dtcRPywn\nGvaFTM5NhHstK2IMERlmt8ky2CJhg456TfP+/2t9/MrHt+JvgTn7zUu5m59a\neT/C9UjasQErNp/o547zf+HiRqF/NwWJZOM7HyWs4UEfTiiJHfeypQEjYPJm\nytVeRJv4z1wfrtjr5YMmn2wd4PGj2DRLOjWHKJhFXavB/OkzexNQy1SbQGU+\niNwvhP7hkD1rcd4fcWDOKaUNgQP2O7aN29gx3ue5hM6j8FkfQcBqRdgnBIJj\ngn+5njkEas6e5l0j2ONkCIAC47tKfwEemk53s0ME+bqDWHY880JXm8IGBLat\neU/w3PSgpc5HNIrS39kcMyNKj4CkQ/1uncrV+EO8XEFfn+FQIEKqz/ypFW+F\njlZEzPe2k08zK4RwJNkhEkQRigDgc266CcUNBzqa/6k4GScLYSuZsvX390PT\nHy9SM5i8Ytt/4tAw0S4yTUnVdTcXST9vL+yPxhUte5L7nsfDyBAac0UfmdPD\nEjRvMiharitehQWQYcSco/qPHXT8OR2ib1YW/SiCkP+BnB+g57yNffYM0fhr\nbz7gMe8k3TEGu2ukCD2WgK3LdnuyX3yqGaTSjXluOD2wF3P7loiPwDFOJbY1\nF3bG\r\n=acy8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOUIt0KUTRy6seUH/KabMxODU8yTsmZ7WrVbQ2kaqs0AiEAxumxDJoVyfK8t0QD8xE+t/LSBSgYzHilunxOd/ViAUg="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.7_1577029608394_0.9972749735753577"},"_hasShrinkwrap":false},"1.0.8":{"name":"vue2-timepicker","version":"1.0.8","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"cb20f74be2adc68c141830772650d9b0ca9d5927","_id":"vue2-timepicker@1.0.8","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-3wtodBBbW2comZYIpqUSvwKkNqAOkJn5TZaC+SypTE/vn001a/f+f1kj1FZdHPT43R4uiD3DLzkP2Y1VDKlNgg==","shasum":"352b450f5d4b20ad5da5cef729f08b3b3ac89b9d","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.0.8.tgz","fileCount":16,"unpackedSize":1331390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJGbZCRA9TVsSAnZWagAAUQcQAJU0Ktpn2eXP0rSyllPd\nqJ+W4JgesrRABj/nLrslY/xb4u+M2+mpnulw5L4KMvSZiYxFmCA5sdRBymy4\nwgkjAkkyQ6xW0UC6aRpxJxiigPHk8JP0u7P3Y+ZqQR4mcmMBhr4R+OluWxym\ng/sk+UmctzVdmCC9/bJiI0oyStiUz/oAMLzc+32fzKCplcdX8iUWi2XST5o2\nJwZCRm6v83Iw/Q5voXRTL1fL0K65SR06lNDY+ShhGBlxxMeh4n0hhHoMS38f\nsc9w346zy296t73jfNg0MRq8WiA6+efLkst1ZTUNIA/ppibh+pegESVvlnZX\nyvqqToAOZJsQ+ZYOfpNBecg6e1MvmruCxtvNhkQgcymj20Cvorzt50FqkPbB\nOMrvolaGtCg1Z5JUpXVJ/3WVp3lhujuoMOIuY2NdBcB4GDcyHXpacu9VPyxT\nZCaSIeV09NgoBpwz2n2WhGs9TuFVTtg9EyAhrDdK6Wsv4eVj4MsgJv+nvGYD\no1aXW86yOzDfOkhRMkp8XD9vqxlgeEJFPIO0Q+07pSmVD/jeXnmFFewc+ZmZ\nvMdGTnU6Ioy2WCvsig9orMQk6/ZBM3CPgaqZaOI8hz1d3nHm5WnlkAXPH1s/\ns5b7BIieZt1zWpZ4af/bcEut/vYDU1Vb9qdZfSR1yklIegOKh64ZkQSC3niw\n6cQy\r\n=fmtM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC52AjsbmSNTWNSK694rHuzIOmGwQSJaYg0RXZUe/BdpQIgPHuMrXfTVkjQSivtCRPndY9mlTqpaR+IfHuvm6SQi6w="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.0.8_1579443928688_0.5527506185645961"},"_hasShrinkwrap":false},"1.1.0-beta.0":{"name":"vue2-timepicker","version":"1.1.0-beta.0","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","readme":"# Vue2 Timepicker  \n\n![GitHub version](https://img.shields.io/github/package-json/v/phoenixwong/vue2-timepicker?color=success&style=flat-square)\n![npm version](https://img.shields.io/npm/v/vue2-timepicker?style=flat-square)\n![GitHub release](https://img.shields.io/github/release/phoenixwong/vue2-timepicker?label=github&style=flat-square)\n![npm downloads](https://img.shields.io/npm/dm/vue2-timepicker?style=flat-square)\n\n---\n\n💡 Dead repo recharged in 2019 🔋\n\n---\n\nA dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.\n\n## Demo\n\nYou can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)\n\n## Migration\n\nPlease check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines if you are about to:\n\n- Migrate from the Vue 1.x version **[vue-time-picker](https://github.com/phoenixwong/vue-timepicker)**\n- Migrate from Bower to Yarn or NPM (Vue2 Timepicker `v0.1.x` -> `v0.2.0+`)\n\n\n## Dependencies\n\n[Vue.js](http://vuejs.org/)&nbsp;&nbsp;&nbsp;![npm peer dependency version](https://img.shields.io/npm/dependency-version/vue2-timepicker/peer/vue?style=flat-square)\n\n## Installation\n\n```bash\nyarn add vue2-timepicker\n```\n\n```bash\nnpm install vue2-timepicker --save\n```\n\n> NOTE: We stop Bower support from `0.2.0+`, please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md#migrating-from-bower-to-yarn-or-npm) for migration guidelines.\n\n## Get Started\n\n### **Step 1:** Import VueTimepicker\n\n#### **Option A:** Import component JS and CSS\n\n```javascript\n// Main JS (in UMD format)\nimport VueTimepicker from 'vue2-timepicker'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n```\n\n#### **Option B:** Choose any bundle version base on your needs\n\n**Javascript**\n\n```javascript\n// CommonJS\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'\n// UMD\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'\n// UMD Minified\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'\n```\n\n**CSS**\n\n```css\n@import 'vue2-timepicker/dist/VueTimepicker.css';\n\n/* Or, with node_module alias path like: */\n@import '~vue2-timepicker/dist/VueTimepicker.css';\n\n/*\n  NOTE: the path alias to `node_modules` differs between bundlers.\n  Please change the `~` to any alias that works with your environment.\n */\n```\n\n**Single File Component**\n\n```javascript\n// The *.vue file with CSS included\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n// NOTE: In some cases, it requires additional workarounds in the bundler's config\n```\n\n#### **SSR Usage**\n\n```javascript\n// Import the *.vue file (CSS included)\nimport VueTimepicker from 'vue2-timepicker/sfc'\n// Note the `/sfc` suffix here\n```\n\nIf your server-side renderer cannot recognize the `/sfc` alias, please try --\n\n```javascript\n// Manually point to the `/src` folder\nimport VueTimepicker from 'vue2-timepicker/src'\n// Or, to the specific file name\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n```\n\n### **Step 2**: Include VueTimepicker in your component\n\n```javascript\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  ...\n})\n```\n\n### **Step 3**: Put `vue-timepicker` in your component's template\n\nThen, you can introduce the `vue-timepicker` tag anywhere you like in your component's template\n\n```html\n<vue-timepicker></vue-timepicker>\n```\n\n\n## Basic Usage\n\n### Base\n\n```html\n<!-- Default to 24-Hour format HH:mm -->\n<vue-timepicker></vue-timepicker>\n```\n\n### Customized Time Format\n\n```html\n<!-- Show seconds picker -->\n<vue-timepicker format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- 12-hour format, with AM/PM picker -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n\n<!-- 12-hour format, with seconds picker and am/pm picker -->\n<vue-timepicker format=\"hh:mm:ss a\"></vue-timepicker>\n```\n\nVueTimepicker recognizes the following tokens in the format string\n\nSection    | Token | Output\n---------- | ----- | ---------------\n**AM/PM**  | A     | AM PM\n&nbsp;     | a     | am pm\n**Hour**   | H     | 0 1 ... 22 23\n&nbsp;     | HH    | 00 01 ... 22 23\n&nbsp;     | h     | 1 2 ... 11 12\n&nbsp;     | hh    | 01 02 ... 11 12\n&nbsp;     | k     | 1 2 ... 23 24\n&nbsp;     | kk    | 01 02 ... 23 24\n**Minute** | m     | 0 1 ... 58 59\n&nbsp;     | mm    | 00 01 ... 58 59\n**Second** | s     | 0 1 ... 58 59\n&nbsp;     | ss    | 00 01 ... 58 59\n\n> If not set, the `format` string is default to \"HH:mm\"\n\n### Customized Picker Interval\n\n```html\n<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->\n<vue-timepicker :minute-interval=\"5\"></vue-timepicker>\n\n<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->\n<vue-timepicker :second-interval=\"10\"></vue-timepicker>\n\n<!-- Bind interval config with your own data variable -->\n<vue-timepicker :minute-interval=\"yourMinuteInterval\"></vue-timepicker>\n```\n\n\n## Data Binding\n\n### Bind Value with `v-model`\n\nFrom `v1.0.0+`, timepicker's `v-model` accepts value in both _Object_ (default) and _String_ format. The `v0.x` versions only support _Object_ form.\n\n#### Set Initial Value\n\nFor example, if you want to set \"10:05:00\" (\"HH:mm:ss\" format) as the initial value of vue-timepicker:\n\n```javascript\nconst yourComponent = new Vue({\n  components: { VueTimepicker },\n  data () {\n    return {\n      // Object form\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      // String form\n      yourStringTimeValue: '10:05:00',\n      ...\n    }\n  },\n  ...\n})\n```\n\nBoth forms lead to the same result.\n\n```html\n<!-- Object form -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- String form -->\n<vue-timepicker v-model=\"yourStringTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n#### Set Empty Initial Value\n\nWhen the initial value is completely unknown:\n\n```javascript\ndata () {\n  return {\n    // Will be rendered as Object form\n    yourEmptyValue: {},\n    emptyValueToo: undefined,\n    emptyValueAsWell: null,\n\n    // Will be taken into String form\n    yourEmptyStringValue: ''\n  }\n}\n```\n\n#### Set Partially-Known Initial Value\n\nFor instance, if you want to set the initial hour value to **8 pm** and leave the rest slots empty:\n\n```javascript\ndata () {\n  return {\n    // OBJECT FORM\n    // Default 24-Hour\n    timeValue: {\n      HH: '20',\n      mm: ''\n    },\n    // 12-Hour with seconds\n    timeValueWithSec: {\n      h: '8',\n      mm: '',\n      ss: '',\n      A: 'PM'\n    },\n\n    // STRING FORM\n    // Default 24-Hour + String value\n    stringTimeValue: '20:mm',\n    // 12-Hour with seconds + String value\n    stringTimeValueWithSec: '8:mm:ss PM'\n  }\n}\n```\n\n```html\n<!-- OBJECT FORM -->\n<!-- Default 24-Hour -->\n<vue-timepicker v-model=\"timeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds -->\n<vue-timepicker v-model=\"timeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n\n<!-- STRING FORM -->\n<!-- Default 24-Hour + String value -->\n<vue-timepicker v-model=\"stringTimeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds + String value -->\n<vue-timepicker v-model=\"stringTimeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n```\n\n### Get Time Picker's Current Value\n\n#### Get value from `v-model`\n\nYou can either read the binding `v-model` value anytime or add a handler to deal with the `input` event from vue-timepicker.\n\n```html\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\" @input=\"inputHandler\"></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      ...\n    }\n  },\n\n  methods: {\n    inputHandler (eventData) {\n      console.log(eventData)\n    }\n  }\n}\n\n```\n\nIn 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.\n\n```javascript\n// In `inputHandler`:\n// console.log outputs -> {HH: \"14\", mm: \"30\", ss: \"15\"}\n```\n\n### Read Data From `change` Event\n\n```html\n<!-- A: No argument -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"changeHandler\"></vue-timepicker>\n\n<!-- B: Custom arguments -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"otherChangeHandler($event, 'foo', 42)\"></vue-timepicker>\n```\n\n```javascript\n// A: No argument\nchangeHandler (eventData) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n}\n\n// B: Custom arguments\notherChangeHandler (eventData, yourArg1, yourArg2) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n  console.log(yourArg1)\n  // -> 'foo'\n  console.log(yourArg2)\n  // -> 42\n}\n```\n\nUnlike `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.\n\nIn the example above, after the user set values to \"14:30:15\" in the picker, `change` event returns the following data:\n\n```javascript\n// `@change` event data\n{\n  data: {\n    HH: \"14\",\n    H: \"14\",\n    hh: \"14\",\n    a: \"am\",\n    A: \"AM\",\n    h: \"14\",\n    kk: \"14\",\n    k: \"14\",\n    m: \"30\",\n    mm: \"30\",\n    s: \"15\",\n    ss: \"15\"\n  },\n  // extra `displayTime` added since v0.2.2\n  displayTime: \"14:30:15\"\n}\n```\n\nWhereas the `v-model` / `input` only return the data with defined tokens\n\n```javascript\n// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}\n// Hence, the `v-model` returns:\n{\n  HH: \"14\",\n  mm: \"30\",\n  ss: \"15\"\n}\n```\n\n## Advance Usage\n\n### Hide Clear Button\n\n```html\n<vue-timepicker hide-clear-button></vue-timepicker>\n```\n\nEnable to hide the \"&times;\" clear button on the right-hand side. Users can still pick new values from the dropdown, but they cannot erase any selected data.\n\n### Disable Picker\n\n```html\n<vue-timepicker disabled></vue-timepicker>\n```\n\nFully disable both dropdown picker and the \"&times;\" clear button in the UI, to prevent users from changing any values again.\n\n### Close on Complete\n\nAutomatically close the dropdown when the user finishes selecting **all** of the required fields.\n\n```html\n<vue-timepicker close-on-complete></vue-timepicker>\n```\n\n### Define Hour Range\n\nSometimes you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.\n\n```html\n<!-- 24-Hour Format -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\"></vue-timepicker>\n<!-- >> Equals to :hour-range=\"[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]\" -->\n\n<!-- 12-Hour Format -->\n<vue-timepicker :hour-range=\"['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']\" format=\"hh:mm a\">\n<!-- >> Equals to :hour-range=\"['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']\" -->\n```\n\n### Set Minute and Second Range\n\nSimilar to `hour-range`, you can determine values in the minutes and seconds dropdown by using `minute-range` and `second-range`.\n\n```html\n<!-- Minute range -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 00, 06, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n\n<!-- Second range -->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 0, 6, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n```\n\nWhen implemented together with `minute-interval` and `second-interval`, the customized intervals take the priority.\n\n```html\n<!-- Minute range + 5-minute interval -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\" :minute-interval=\"5\"></vue-timepicker>\n<!-- >> Active Items: 00, 10, 15, 20, 25, 30, 50 -->\n\n<!-- Second range + 10-second interval-->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\" :second-interval=\"10\"></vue-timepicker>\n<!-- >> Active Items: 0, 10, 20, 30, 50 -->\n```\n\n### Hide Disabled Items\n\nThere're four kinds of helper properties to let you hide the values excluded by `hour-range`, `minute-range`, and `second-range`.\n\n- **hide-disabled-items**: Hide **all** disabled items - hour, minute, and seconds.\n- **hide-disabled-hours**: Hide disabled **hour** values only.\n- **hide-disabled-minutes**: Hide disabled **minute** values only.\n- **hide-disabled-seconds**: Hide disabled **second** values only.\n\n```html\n<!-- `hide-disabled-hours` sample -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\" hide-disabled-hours></vue-timepicker>\n```\n\nHere 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.\n\n### Advanced Keyboard Support\n\nBasic keyboard support includes:\n\n- **Tab**: Focus or blur the Timepicker\n- **Esc**: Close the dropdown\n\nAdvance Keyboard support (enabled with `advanced-keyboard`):\n\n- **Arrow Keys**: Navigate between valid (non-disabled) values and columns\n- **Space** or **Enter**: Select the focusing item\n\n```html\n<vue-timepicker advanced-keyboard></vue-timepicker>\n```\n\nPlease 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.\n\n### Manual Input Support\n\n```html\n<vue-timepicker manual-input></vue-timepicker>\n```\nLet users to add or change values through the `<input>` box besides the dropdown picker.\n\n### Blur Delay\n\n```html\n<!-- Unit: million second -->\n<vue-timepicker :blur-delay=\"500\"></vue-timepicker>\n```\n\nSets the blur delay time for the dropdown. Defaults to `300` if not set.\n\n### Lazy Event Mode\n\n```html\n<vue-timepicker lazy></vue-timepicker>\n```\n\nWhen `lazy` event mode is toggled on, only an actual user behavior can trigger the `input` and `change` events. Which are:\n\n- The user opened the dropdown and picked a new value\n- The user clicked the (\"x\") clear button\n\nIn other words, on `lazy` mode, Timepicker won't emit `input` and `change` events on mounted, nor after the value got modified programmatically.\n\n### Auto-Scroll\n\n```html\n<vue-timepicker auto-scroll></vue-timepicker>\n```\n\nAuto-scroll to selected values on dropdown open. It works with both:\n\n- Programmatically defined value. E.g., the initial value from `v-model`\n- Values manually picked by the user.\n\n\n### Enable Debug Mode\n\n```html\n<vue-timepicker debug-mode></vue-timepicker>\n```\n\nIt'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.\n\nLet's create a \"bug\" here as an example --\n\n```html\n<!-- Manual Bug Sample: Define timepicker with format \"h:mm:ss A\" -->\n<vue-timepicker v-model=\"yourStringValue\" format=\"h:mm:ss A\" debug-mode></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      // Manual Bug Sample:\n      // Should be '3:mm:05 A' but oops.. the finger slipped\n      yourStringValue: 'e:mm:05 A'\n    }\n  }\n}\n```\n\nThen, in the console window, you should see a debug log saying:\n\n```console\nDEBUG: The input string in \"v-model\" does NOT match the \"format\" pattern\nformat: h:mm:ss A\nv-model: e:mm:05 A\n```\n\n## Main Props API Overview\n\nProp                      | Type               | Required | Default Value\n------------------------- | ------------------ | -------- | -------------\n**v-model**               | _Object_, _String_ | no       | _undefined_\n**format**                | _String_           | no       | \"HH:mm\"\n**minute-interval**       | _Number_           | no       | _undefined_\n**second-interval**       | _Number_           | no       | _undefined_\n**hide-clear-button**     | _Boolean_          | no       | false\n**disabled**              | _Boolean_          | no       | false\n**close-on-complete**     | _Boolean_          | no       | false\n**hour-range**            | _Array_            | no       | _undefined_\n**minute-range**          | _Array_            | no       | _undefined_\n**second-range**          | _Array_            | no       | _undefined_\n**hide-disabled-hours**   | _Boolean_          | no       | false\n**hide-disabled-minutes** | _Boolean_          | no       | false\n**hide-disabled-seconds** | _Boolean_          | no       | false\n**hide-disabled-items**   | _Boolean_          | no       | false\n**advanced-keyboard**     | _Boolean_          | no       | false\n**manual-input**          | _Boolean_          | no       | false\n**blur-delay**            | _Number_           | no       | 300\n**lazy**                  | _Boolean_          | no       | false\n**auto-scroll**           | _Boolean_          | no       | false\n**debug-mode**            | _Boolean_          | no       | false\n\n\n## Input Props API\n\nProp              | Type                        | Required | Default Value\n------------------| --------------------------- | -------- | -------------\n**id**            | _String_                    | no       | _undefined_\n**name**          | _String_                    | no       | _undefined_\n**placeholder**   | _String_                    | no       | _undefined_\n**tabindex**      | _Number_                    | no       | 0\n**input-class**   | _String_, _Array_, _Object_ | no       | _undefined_\n**input-width**   | _String_                    | no       | '10em'\n\nTimepicker 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.\n\n### Input `id`, `name` and `tabindex`\n\n```html\n<!-- id -->\n<vue-timepicker id=\"myFirstPicker\"></vue-timepicker>\n\n<!-- name -->\n<vue-timepicker name=\"nameInForm\"></vue-timepicker>\n\n<!-- tabindex -->\n<vue-timepicker :tabindex=\"5\"></vue-timepicker>\n```\n\n### Input `placeholder`\n\nWhen `placeholder` is undefined, timepicker takes the determined format string instead.\n\n```html\n<!-- placeholder is set -->\n<vue-timepicker placeholder=\"Start Time\"></vue-timepicker>\n<!-- -> \"Start Time\" -->\n\n<!-- placeholder not set -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n<!-- -> \"hh:mm A\" -->\n\n<!-- both placeholder and format are not set -->\n<vue-timepicker></vue-timepicker>\n<!-- -> \"HH:mm\" -->\n```\n\n### The `input-class`\n\nThe `input-class` is assigned to the text input within the component as well.\n\n```html\n<!-- Set your own `input-class` in the Vue template -->\n<vue-timepicker input-class=\"my-awesome-picker\"></vue-timepicker>\n```\n\n```html\n<!-- HTML result -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time my-awesome-picker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n```\n\nStart from `v1.0.4`, besides _String_ format, `input-class` accepts value in _Array_ and _Object_ type as well.\n\n```html\n<!-- String type -->\n<vue-timepicker input-class=\"your-awesome-timepicker i-am-vue2-timepicker\"></vue-timepicker>\n\n<!-- Array type -->\n<vue-timepicker :input-class=\"['your-awesome-timepicker', 'i-am-vue2-timepicker']\"></vue-timepicker>\n\n<!-- Object type -->\n<vue-timepicker :input-class=\"{\n  'your-awesome-timepicker': true,\n  'foo': false,\n  'i-am-vue2-timepicker': true,\n  'bar': false\n}\"></vue-timepicker>\n```\n\n```html\n<!-- All of the three samples above return the same result in rendered HTML -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time your-awesome-timepicker i-am-vue2-timepicker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n```\n\n### The `input-width`\n\nThe `input-width` helps you to adjust both the `<input>` and the dropdown picker's width without overriding the CSS style on your own. It accepts any valid CSS width values like `8em`, `200px`, etc.\n\n```html\n<!-- In `px` -->\n<vue-timepicker input-width=\"100px\"></vue-timepicker>\n\n<!-- In `em` -->\n<vue-timepicker input-width=\"12em\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n\n## Events API\n\nEvent          | Arguments      | Description\n-------------- | -------------- | ----------------------\n**input**      | (_value_)      | Emit after value changes\n**change**     | (_eventData_)  | Emit after value changes\n**open**       | &nbsp;         | Emit when the dropdown opens\n**close**      | &nbsp;         | Emit when the dropdown closes\n\n### The `open` and `close` Event of the Dropdown Picker\n\nHelp to identify the current status of the dropdown picker\n\n```javascript\n// Define a variable for logging the status\ndata () {\n  return {\n    dropdownStatus: 'closed'\n  }\n}\n```\n\n```html\n<p>Dropdown Status: I'm {{dropdownStatus}}!</p>\n\n<vue-timepicker @open=\"dropdownStatus = 'opened'\" @close=\"dropdownStatus = 'closed'\"></vue-timepicker>\n```\n\n## Miscellaneous Props API\n\nProp                    | Type      | Required | Default Value\n----------------------- | --------- | -------- | -------------\n**hour-label**          | _String_  | no       | _undefined_\n**minute-label**        | _String_  | no       | _undefined_\n**second-label**        | _String_  | no       | _undefined_\n**apm-label**           | _String_  | no       | _undefined_\n**am-text**             | _String_  | no       | _undefined_\n**pm-text**             | _String_  | no       | _undefined_\n\n### Customized Picker Labels\n\nYou can define customized labels on top of the hour, minute, second, and APM pickers with the following properties: `hour-label`, `minute-label`, `second-label`, and `apm-label`. \n\nFurthermore, you can replace those _am/pm_ (or _AM/PM_) string by setting the `am-text` and `pm-text` parameters.\n\n> Please note that these two parameters only change the labels expose to the users (the UI level). The `v-model` value and `displayTime` value returned by the `change` event (the data level) still use the standard _am_/_pm_ (_AM_/_PM_) format.\n\n```html\n<!-- 24-hour format with customized hour and minute label -->\n<vue-timepicker hour-label=\"heure\" minute-label=\"minute\"></vue-timepicker>\n\n<!-- 12-hour format with customized am/pm text -->\n<vue-timepicker hour-label=\"時\" minute-label=\"分\" second-label=\"秒\" apm-label=\"午\" am-text=\"上午\" pm-text=\"下午\" format=\"h:mm:ss a\"></vue-timepicker>\n```\n\n## Contribution\n\nPlease feel free to fork and help developing. Check [CONTRIBUTING.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CONTRIBUTING.md) for more details.\n\n## Change Log\n\nDetail changes of each release: [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)\n\n## License\n\n[MIT](https://github.com/phoenixwong/vue2-timepicker/blob/master/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"0cc0458526aaac436f38153a29b86f815f0a6060","_id":"vue2-timepicker@1.1.0-beta.0","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-3pFZh/4vWcjXFp3IJE8W+bKXKUfS5NBz7/IhEUoRRrN9TKtWnLZsgJPFjNEb/ginn7hFbjT2Rx7NYWu+N4ORWA==","shasum":"4311356b13551b2474c80f6577f47be6b734fd17","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.0-beta.0.tgz","fileCount":16,"unpackedSize":1481992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepaesCRA9TVsSAnZWagAA4YMP/A6n3LjiMi6Ny/6gLBlO\n8L4fsQn+iSLY3SAq/3DBnjINQlADKDAcv2ukQOeDEsYDnOB5BAT13Z7Uqi2B\n+5eJoN+lpLX99T3gKwDQOclVMaKyQgYz8XUdNOGn7ADgayGLy9mEfefu8RHO\nOYvB07CfQVWzPfXD3r83PoCa5tk/Ah9NHcq4m2pjBqRJRqKy2H9u3Aogc5DY\nKWcu1Q1xpo9ZO7RczRvVPsDMef407UXRT4KBKeD7dipuvg1UPveDXlSn3zj5\nkH2/DMBheQmomTCe+H9i2XiTUUkFY+xe0yaqO5Ub7gXLwAs97ni5K4ygqMxB\nGswFeDMMTXL6ihnCzsJ/OE93kLwImanRQNU2u6urE6nqIiDe4oyx/JLE4uL5\nccJ9pAdrKTk7f2I0FQ5m8BnbtOYcNoF6/BUPXkBUDwOAjMSLiPqVgo2tVdao\nCWePDQvJOp+sLggfrTNq9zuNHhOcD4vwqrN2lFcd/zhV97tuMqLu53e41zkG\nKCH61SJJY/6046NbEYGz3Kw6VOJD6CNtd6FOZ1h5A81g5oI31h1V7kheG2b6\n2OQVC2Y7x2atRpjh3y3AzuH6Hj0q0U1FpbAfxGU7J0X+VnEMqd8yxSQE3DK0\n8eLceRmHUFyLzrIbjApetqZ2KPkD9hR2r4wz3HwHSq2VuS5seuVpjZTPBucV\nMQBI\r\n=ZGbR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrsgWvL8YdGjPhBce/Ws8wdBwiIXvSim7fLMCTlll1ygIgMnYqyiN12bSyAUmJdyVB/oFEHn1QwTQCvXXdyVfPFF8="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.1.0-beta.0_1587914667765_0.12532107042484775"},"_hasShrinkwrap":false,"deprecated":"test flight version deprecated"},"1.1.0-beta.1":{"name":"vue2-timepicker","version":"1.1.0-beta.1","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","readme":"# Vue2 Timepicker  \n\n![GitHub version](https://img.shields.io/github/package-json/v/phoenixwong/vue2-timepicker?color=success&style=flat-square)\n![npm version](https://img.shields.io/npm/v/vue2-timepicker?style=flat-square)\n![GitHub release](https://img.shields.io/github/release/phoenixwong/vue2-timepicker?label=github&style=flat-square)\n![npm downloads](https://img.shields.io/npm/dm/vue2-timepicker?style=flat-square)\n\n---\n\n💡 Dead repo recharged 🔋\n\n---\n\nA dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.\n\n## Demo\n\nYou can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)\n\n## Migration\n\nPlease check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines if you are about to:\n\n- Migrate from the Vue 1.x version **[vue-time-picker](https://github.com/phoenixwong/vue-timepicker)**\n- Migrate from Bower to Yarn or NPM (Vue2 Timepicker `v0.1.x` -> `v0.2.0+`)\n\n\n## Dependencies\n\n[Vue.js](http://vuejs.org/)&nbsp;&nbsp;&nbsp;![npm peer dependency version](https://img.shields.io/npm/dependency-version/vue2-timepicker/peer/vue?style=flat-square)\n\n## Installation\n\n```bash\nyarn add vue2-timepicker\n```\n\n```bash\nnpm install vue2-timepicker --save\n```\n\n> NOTE: We stop Bower support from `0.2.0+`, please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md#migrating-from-bower-to-yarn-or-npm) for migration guidelines.\n\n## Get Started\n\n### **Step 1:** Import VueTimepicker\n\n#### **Option A:** Import component JS and CSS\n\n```javascript\n// Main JS (in UMD format)\nimport VueTimepicker from 'vue2-timepicker'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n```\n\n#### **Option B:** Choose any bundle version base on your needs\n\n**Javascript**\n\n```javascript\n// CommonJS\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'\n// UMD\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'\n// UMD Minified\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'\n```\n\n**CSS**\n\n```css\n@import 'vue2-timepicker/dist/VueTimepicker.css';\n\n/* Or, with node_module alias path like: */\n@import '~vue2-timepicker/dist/VueTimepicker.css';\n\n/*\n  NOTE: the path alias to `node_modules` differs between bundlers.\n  Please change the `~` to any alias that works with your environment.\n */\n```\n\n**Single File Component**\n\n```javascript\n// The *.vue file with CSS included\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n// NOTE: In some cases, it requires additional workarounds in the bundler's config\n```\n\n#### **SSR Usage**\n\n```javascript\n// Import the *.vue file (CSS included)\nimport VueTimepicker from 'vue2-timepicker/sfc'\n// Note the `/sfc` suffix here\n```\n\nIf your server-side renderer cannot recognize the `/sfc` alias, please try --\n\n```javascript\n// Manually point to the `/src` folder\nimport VueTimepicker from 'vue2-timepicker/src'\n// Or, to the specific file name\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n```\n\n### **Step 2**: Include VueTimepicker in your component\n\n```javascript\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  ...\n})\n```\n\n### **Step 3**: Put `vue-timepicker` in your component's template\n\nThen, you can introduce the `vue-timepicker` tag anywhere you like in your component's template\n\n```html\n<vue-timepicker></vue-timepicker>\n```\n\n\n## Basic Usage\n\n### Base\n\n```html\n<!-- Default to 24-Hour format HH:mm -->\n<vue-timepicker></vue-timepicker>\n```\n\n### Customized Time Format\n\n```html\n<!-- Show seconds picker -->\n<vue-timepicker format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- 12-hour format, with AM/PM picker -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n\n<!-- 12-hour format, with seconds picker and am/pm picker -->\n<vue-timepicker format=\"hh:mm:ss a\"></vue-timepicker>\n```\n\nVueTimepicker recognizes the following tokens in the format string\n\nSection    | Token | Output\n---------- | ----- | ---------------\n**AM/PM**  | A     | AM PM\n&nbsp;     | a     | am pm\n**Hour**   | H     | 0 1 ... 22 23\n&nbsp;     | HH    | 00 01 ... 22 23\n&nbsp;     | h     | 1 2 ... 11 12\n&nbsp;     | hh    | 01 02 ... 11 12\n&nbsp;     | k     | 1 2 ... 23 24\n&nbsp;     | kk    | 01 02 ... 23 24\n**Minute** | m     | 0 1 ... 58 59\n&nbsp;     | mm    | 00 01 ... 58 59\n**Second** | s     | 0 1 ... 58 59\n&nbsp;     | ss    | 00 01 ... 58 59\n\n> If not set, the `format` string is default to \"HH:mm\"\n\n### Customized Picker Interval\n\n```html\n<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->\n<vue-timepicker :minute-interval=\"5\"></vue-timepicker>\n\n<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->\n<vue-timepicker :second-interval=\"10\"></vue-timepicker>\n\n<!-- Bind interval config with your own data variable -->\n<vue-timepicker :minute-interval=\"yourMinuteInterval\"></vue-timepicker>\n```\n\n\n## Data Binding\n\n### Bind Value with `v-model`\n\nFrom `v1.0.0+`, timepicker's `v-model` accepts value in both _Object_ (default) and _String_ format. The `v0.x` versions only support _Object_ form.\n\n#### Set Initial Value\n\nFor example, if you want to set \"10:05:00\" (\"HH:mm:ss\" format) as the initial value of vue-timepicker:\n\n```javascript\nconst yourComponent = new Vue({\n  components: { VueTimepicker },\n  data () {\n    return {\n      // Object form\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      // String form\n      yourStringTimeValue: '10:05:00',\n      ...\n    }\n  },\n  ...\n})\n```\n\nBoth forms lead to the same result.\n\n```html\n<!-- Object form -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- String form -->\n<vue-timepicker v-model=\"yourStringTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n#### Set Empty Initial Value\n\nWhen the initial value is completely unknown:\n\n```javascript\ndata () {\n  return {\n    // Will be rendered as Object form\n    yourEmptyValue: {},\n    emptyValueToo: undefined,\n    emptyValueAsWell: null,\n\n    // Will be taken into String form\n    yourEmptyStringValue: ''\n  }\n}\n```\n\n#### Set Partially-Known Initial Value\n\nFor instance, if you want to set the initial hour value to **8 pm** and leave the rest slots empty:\n\n```javascript\ndata () {\n  return {\n    // OBJECT FORM\n    // Default 24-Hour\n    timeValue: {\n      HH: '20',\n      mm: ''\n    },\n    // 12-Hour with seconds\n    timeValueWithSec: {\n      h: '8',\n      mm: '',\n      ss: '',\n      A: 'PM'\n    },\n\n    // STRING FORM\n    // Default 24-Hour + String value\n    stringTimeValue: '20:mm',\n    // 12-Hour with seconds + String value\n    stringTimeValueWithSec: '8:mm:ss PM'\n  }\n}\n```\n\n```html\n<!-- OBJECT FORM -->\n<!-- Default 24-Hour -->\n<vue-timepicker v-model=\"timeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds -->\n<vue-timepicker v-model=\"timeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n\n<!-- STRING FORM -->\n<!-- Default 24-Hour + String value -->\n<vue-timepicker v-model=\"stringTimeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds + String value -->\n<vue-timepicker v-model=\"stringTimeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n```\n\n### Get Time Picker's Current Value\n\n#### Get value from `v-model`\n\nYou can either read the binding `v-model` value anytime or add a handler to deal with the `input` event from vue-timepicker.\n\n```html\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\" @input=\"inputHandler\"></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      ...\n    }\n  },\n\n  methods: {\n    inputHandler (eventData) {\n      console.log(eventData)\n    }\n  }\n}\n\n```\n\nIn 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.\n\n```javascript\n// In `inputHandler`:\n// console.log outputs -> {HH: \"14\", mm: \"30\", ss: \"15\"}\n```\n\n### Read Data From `change` Event\n\n```html\n<!-- A: No argument -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"changeHandler\"></vue-timepicker>\n\n<!-- B: Custom arguments -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"otherChangeHandler($event, 'foo', 42)\"></vue-timepicker>\n```\n\n```javascript\n// A: No argument\nchangeHandler (eventData) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n}\n\n// B: Custom arguments\notherChangeHandler (eventData, yourArg1, yourArg2) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n  console.log(yourArg1)\n  // -> 'foo'\n  console.log(yourArg2)\n  // -> 42\n}\n```\n\nUnlike `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.\n\nIn the example above, after the user set values to \"14:30:15\" in the picker, `change` event returns the following data:\n\n```javascript\n// `@change` event data\n{\n  data: {\n    HH: \"14\",\n    H: \"14\",\n    hh: \"14\",\n    a: \"am\",\n    A: \"AM\",\n    h: \"14\",\n    kk: \"14\",\n    k: \"14\",\n    m: \"30\",\n    mm: \"30\",\n    s: \"15\",\n    ss: \"15\"\n  },\n  // extra `displayTime` added since v0.2.2\n  displayTime: \"14:30:15\"\n}\n```\n\nWhereas the `v-model` / `input` only return the data with defined tokens\n\n```javascript\n// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}\n// Hence, the `v-model` returns:\n{\n  HH: \"14\",\n  mm: \"30\",\n  ss: \"15\"\n}\n```\n\n## Advance Usage\n\n### Hide Clear Button\n\n```html\n<vue-timepicker hide-clear-button></vue-timepicker>\n```\n\nEnable to hide the \"&times;\" clear button on the right-hand side. Users can still pick new values from the dropdown, but they cannot erase any selected data.\n\n### Disable Picker\n\n```html\n<vue-timepicker disabled></vue-timepicker>\n```\n\nFully disable both dropdown picker and the \"&times;\" clear button in the UI, to prevent users from changing any values again.\n\n### Close on Complete\n\nAutomatically close the dropdown when the user finishes selecting **all** of the required fields.\n\n```html\n<vue-timepicker close-on-complete></vue-timepicker>\n```\n\n### Define Hour Range\n\nSometimes you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.\n\n```html\n<!-- 24-Hour Format -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\"></vue-timepicker>\n<!-- >> Equals to :hour-range=\"[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]\" -->\n\n<!-- 12-Hour Format -->\n<vue-timepicker :hour-range=\"['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']\" format=\"hh:mm a\">\n<!-- >> Equals to :hour-range=\"['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']\" -->\n```\n\n### Set Minute and Second Range\n\nSimilar to `hour-range`, you can determine values in the minutes and seconds dropdown by using `minute-range` and `second-range`.\n\n```html\n<!-- Minute range -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 00, 06, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n\n<!-- Second range -->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 0, 6, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n```\n\nWhen implemented together with `minute-interval` and `second-interval`, the customized intervals take the priority.\n\n```html\n<!-- Minute range + 5-minute interval -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\" :minute-interval=\"5\"></vue-timepicker>\n<!-- >> Active Items: 00, 10, 15, 20, 25, 30, 50 -->\n\n<!-- Second range + 10-second interval-->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\" :second-interval=\"10\"></vue-timepicker>\n<!-- >> Active Items: 0, 10, 20, 30, 50 -->\n```\n\n### Hide Disabled Items\n\nThere're four kinds of helper properties to let you hide the values excluded by `hour-range`, `minute-range`, and `second-range`.\n\n- **hide-disabled-items**: Hide **all** disabled items - hour, minute, and seconds.\n- **hide-disabled-hours**: Hide disabled **hour** values only.\n- **hide-disabled-minutes**: Hide disabled **minute** values only.\n- **hide-disabled-seconds**: Hide disabled **second** values only.\n\n```html\n<!-- `hide-disabled-hours` sample -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\" hide-disabled-hours></vue-timepicker>\n```\n\nHere 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.\n\n### Advanced Keyboard Support\n\nBasic keyboard support includes:\n\n- **Tab**: Focus or blur the Timepicker\n- **Esc**: Close the dropdown\n\nAdvance Keyboard support (enabled with `advanced-keyboard`):\n\n- **Arrow Keys**: Navigate between valid (non-disabled) values and columns\n- **Space** or **Enter**: Select the focusing item\n\n```html\n<vue-timepicker advanced-keyboard></vue-timepicker>\n```\n\nPlease 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.\n\n### Manual Input Support\n\n```html\n<vue-timepicker manual-input></vue-timepicker>\n```\nLet users add or change values through the `<input>` box besides the dropdown picker.\n\n### Blur Delay\n\n```html\n<!-- Unit: million second -->\n<vue-timepicker :blur-delay=\"500\"></vue-timepicker>\n```\n\nSets the blur delay time for the dropdown. Defaults to `300` if not set.\n\n### Lazy Event Mode\n\n```html\n<vue-timepicker lazy></vue-timepicker>\n```\n\nWhen `lazy` event mode is toggled on, only an actual user behavior can trigger the `input` and `change` events. Which are:\n\n- The user opened the dropdown and picked a new value\n- The user clicked the (\"x\") clear button\n\nIn other words, on `lazy` mode, Timepicker won't emit `input` and `change` events on mounted, nor after the value got modified programmatically.\n\n### Auto-Scroll\n\n```html\n<vue-timepicker auto-scroll></vue-timepicker>\n```\n\nAuto-scroll to selected values on dropdown open. It works with both:\n\n- Programmatically defined value. E.g., the initial value from `v-model`\n- Values manually picked by the user.\n\n\n### Enable Debug Mode\n\n```html\n<vue-timepicker debug-mode></vue-timepicker>\n```\n\nIt'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.\n\nLet's create a \"bug\" here as an example --\n\n```html\n<!-- Manual Bug Sample: Define timepicker with format \"h:mm:ss A\" -->\n<vue-timepicker v-model=\"yourStringValue\" format=\"h:mm:ss A\" debug-mode></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      // Manual Bug Sample:\n      // Should be '3:mm:05 A' but oops.. the finger slipped\n      yourStringValue: 'e:mm:05 A'\n    }\n  }\n}\n```\n\nThen, in the console window, you should see a debug log saying:\n\n```console\nDEBUG: The input string in \"v-model\" does NOT match the \"format\" pattern\nformat: h:mm:ss A\nv-model: e:mm:05 A\n```\n\n## Main Props API Overview\n\nProp                      | Type               | Required | Default Value\n------------------------- | ------------------ | -------- | -------------\n**v-model**               | _Object_, _String_ | no       | _undefined_\n**format**                | _String_           | no       | \"HH:mm\"\n**minute-interval**       | _Number_           | no       | _undefined_\n**second-interval**       | _Number_           | no       | _undefined_\n**hide-clear-button**     | _Boolean_          | no       | false\n**disabled**              | _Boolean_          | no       | false\n**close-on-complete**     | _Boolean_          | no       | false\n**hour-range**            | _Array_            | no       | _undefined_\n**minute-range**          | _Array_            | no       | _undefined_\n**second-range**          | _Array_            | no       | _undefined_\n**hide-disabled-hours**   | _Boolean_          | no       | false\n**hide-disabled-minutes** | _Boolean_          | no       | false\n**hide-disabled-seconds** | _Boolean_          | no       | false\n**hide-disabled-items**   | _Boolean_          | no       | false\n**advanced-keyboard**     | _Boolean_          | no       | false\n**manual-input**          | _Boolean_          | no       | false\n**blur-delay**            | _Number_           | no       | 300\n**lazy**                  | _Boolean_          | no       | false\n**auto-scroll**           | _Boolean_          | no       | false\n**debug-mode**            | _Boolean_          | no       | false\n\n\n## Input Props API\n\nProp              | Type                        | Required | Default Value\n------------------| --------------------------- | -------- | -------------\n**id**            | _String_                    | no       | _undefined_\n**name**          | _String_                    | no       | _undefined_\n**placeholder**   | _String_                    | no       | _undefined_\n**tabindex**      | _Number_                    | no       | 0\n**autocomplete**  | _String_                    | no       | 'off'\n**input-class**   | _String_, _Array_, _Object_ | no       | _undefined_\n**input-width**   | _String_                    | no       | '10em'\n\nTimepicker 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.\n\n### Input `id`, `name` and `tabindex`\n\n```html\n<!-- id -->\n<vue-timepicker id=\"myFirstPicker\"></vue-timepicker>\n\n<!-- name -->\n<vue-timepicker name=\"nameInForm\"></vue-timepicker>\n\n<!-- tabindex -->\n<vue-timepicker :tabindex=\"5\"></vue-timepicker>\n```\n\n### Input `placeholder`\n\nWhen `placeholder` is undefined, timepicker takes the determined format string instead.\n\n```html\n<!-- placeholder is set -->\n<vue-timepicker placeholder=\"Start Time\"></vue-timepicker>\n<!-- -> \"Start Time\" -->\n\n<!-- placeholder not set -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n<!-- -> \"hh:mm A\" -->\n\n<!-- both placeholder and format are not set -->\n<vue-timepicker></vue-timepicker>\n<!-- -> \"HH:mm\" -->\n```\n\n### Input `autocomplete` Attribute\n\n> **NOTE:** To use this property, you MUST ENABLE the `manual-input` mode _(v.1.1.0+)_ in the first place.\n\n```html\n<!-- In Vue Template -->\n<vue-timepicker name=\"starttime\" autocomplete=\"on\" manual-input></vue-timepicker>\n```\n\n```html\n<!-- HTML result -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time\" name=\"starttime\" type=\"text\" autocomplete=\"on\">\n  <!-- ... -->\n</span>\n```\n\nWhen enabled, it accepts any string value supported by the HTML input `autocomplete` attribute. The value is assigned to the embedding text input, which means it follows form autofill rules and configs set in the browser level. For example, most of the browsers require the input to have a `name` and/or `id` attribute. Some browsers, like Firefox, demand the input to be a descendant of a `<form>` element.\n\nPlease refer to the [HTML documentation](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) and the developer guideline of each browser for more information (i.e., [MDN docs here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)).\n\n\n### The `input-class`\n\nThe `input-class` is assigned to the text input within the component as well.\n\n```html\n<!-- Set your own `input-class` in the Vue template -->\n<vue-timepicker input-class=\"my-awesome-picker\"></vue-timepicker>\n```\n\n```html\n<!-- HTML result -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time my-awesome-picker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n```\n\nStart from `v1.0.4`, besides _String_ format, `input-class` accepts value in _Array_ and _Object_ type as well.\n\n```html\n<!-- String type -->\n<vue-timepicker input-class=\"your-awesome-timepicker i-am-vue2-timepicker\"></vue-timepicker>\n\n<!-- Array type -->\n<vue-timepicker :input-class=\"['your-awesome-timepicker', 'i-am-vue2-timepicker']\"></vue-timepicker>\n\n<!-- Object type -->\n<vue-timepicker :input-class=\"{\n  'your-awesome-timepicker': true,\n  'foo': false,\n  'i-am-vue2-timepicker': true,\n  'bar': false\n}\"></vue-timepicker>\n```\n\n```html\n<!-- All of the three samples above return the same result in rendered HTML -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time your-awesome-timepicker i-am-vue2-timepicker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n```\n\n### The `input-width`\n\nThe `input-width` helps you to adjust both the `<input>` and the dropdown picker's width without overriding the CSS style on your own. It accepts any valid CSS width values like `8em`, `200px`, etc.\n\n```html\n<!-- In `px` -->\n<vue-timepicker input-width=\"100px\"></vue-timepicker>\n\n<!-- In `em` -->\n<vue-timepicker input-width=\"12em\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n\n## Events API\n\nEvent          | Arguments      | Description\n-------------- | -------------- | ----------------------\n**input**      | (_value_)      | Emit after value changes\n**change**     | (_eventData_)  | Emit after value changes\n**open**       | &nbsp;         | Emit when the dropdown opens\n**close**      | &nbsp;         | Emit when the dropdown closes\n\n### The `open` and `close` Event of the Dropdown Picker\n\nHelp to identify the current status of the dropdown picker\n\n```javascript\n// Define a variable for logging the status\ndata () {\n  return {\n    dropdownStatus: 'closed'\n  }\n}\n```\n\n```html\n<p>Dropdown Status: I'm {{dropdownStatus}}!</p>\n\n<vue-timepicker @open=\"dropdownStatus = 'opened'\" @close=\"dropdownStatus = 'closed'\"></vue-timepicker>\n```\n\n## Helper CSS Class Names\n\nStarted from `v.1.1.0+`, Vue Timepicker will add additional CSS classes to the `<input>` element base on the state of the current input value.\n\n- **invalid**: One or more fields containing an invalid or disabled value.\n  - Additional CSS Style: The `<input>` border turns red.\n- **is-empty**: The input value (_v-model_) is empty. No additional style.\n- **all-selected**: All fields (hour/minute/second/apm) required by the `format` string are not empty. No additional style.\n\n\n## Miscellaneous Props API\n\nProp                    | Type      | Required | Default Value\n----------------------- | --------- | -------- | -------------\n**hour-label**          | _String_  | no       | _undefined_\n**minute-label**        | _String_  | no       | _undefined_\n**second-label**        | _String_  | no       | _undefined_\n**apm-label**           | _String_  | no       | _undefined_\n**am-text**             | _String_  | no       | _undefined_\n**pm-text**             | _String_  | no       | _undefined_\n\n### Customized Picker Labels\n\nYou can define customized labels on top of the hour, minute, second, and APM pickers with the following properties: `hour-label`, `minute-label`, `second-label`, and `apm-label`. \n\nFurthermore, you can replace those _am/pm_ (or _AM/PM_) string by setting the `am-text` and `pm-text` parameters.\n\n> Please note that these two parameters only change the labels expose to the users (the UI level). The `v-model` value and `displayTime` value returned by the `change` event (the data level) still use the standard _am_/_pm_ (_AM_/_PM_) format.\n\n```html\n<!-- 24-hour format with customized hour and minute label -->\n<vue-timepicker hour-label=\"heure\" minute-label=\"minute\"></vue-timepicker>\n\n<!-- 12-hour format with customized am/pm text -->\n<vue-timepicker hour-label=\"時\" minute-label=\"分\" second-label=\"秒\" apm-label=\"午\" am-text=\"上午\" pm-text=\"下午\" format=\"h:mm:ss a\"></vue-timepicker>\n```\n\n## Contribution\n\nPlease feel free to fork and help developing. Check [CONTRIBUTING.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CONTRIBUTING.md) for more details.\n\n## Change Log\n\nDetail changes of each release: [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)\n\n## License\n\n[MIT](https://github.com/phoenixwong/vue2-timepicker/blob/master/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"6fe8326f932e212417fce7a70d714cddf600cff1","_id":"vue2-timepicker@1.1.0-beta.1","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-EBmaHUHPI21ejNr2iJehst3EiK4ljnU2Lhlvhx3UXgYzKJ/5857nG7bQ5PMcXEAYvDcG32+XNuLZmDjxSJ890w==","shasum":"650d06fea92026d01520f0a156bfd8ef59b3574f","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.0-beta.1.tgz","fileCount":16,"unpackedSize":1488257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesDIoCRA9TVsSAnZWagAAQmgP/R/PSR7HzICw8Fp32lZ7\n5EB0Qhpeoel0nPs4v8ercZWOJhQuVyJUOl+xGAQD78RguIiYKN87aewJcfDy\nWFgJ4YqOHiV4633skvVcSLF6B+JGW6xjMuoJyxigwzv5GIO9MKMeuzAZJxT7\nPb2PbD2HYwXvwWe4aol2KxU33aBBPq5ONZMPC4ujtvaBhJvdWsyJv7buxwmE\n8vuWMzdiKb1fvpGK6hiiWmNsbNT6OYh2JCT8lVXvDxm9M/2PCeso/ASDJNPj\nvaYnO3Qf+8ksXUnuTw7phX15M5pLzm0xooEwLVbtNGTbM/b7+SUX20ck5piU\nAy2oD8w6mrzfLasByGYUgGOElEQzHosCoxGrQDFIhVf7UWPFSDnMj5FGW0tN\nagKlc/axlx47SM1ATotzD8WT9W8WrubdITw/D7DUkn4EEcJho+VRIOPRI61l\n7VbyTGI0VTdqWbHyoWKQQgB+4jOWaSswyCLX89mOMD0hp8odopV9EcQTh0o1\nc2aL51DLbRfYz4nNz/toHlfZ6Y9XGpclxutVhZVA8ZfP0HhrcX3vudx10st3\nne0vhHP8Yo8G83UZ/QPst3KTYFQ+95jqHE80008e8mOrWtfnXtX0mgQ9V4Xt\nTYH2OENQdOTywSAya/A2IrujKxenPrBmNVOgm/68pg2Z88Y1yh7OcDvEXnFo\nD/Em\r\n=/Za/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFulzahdhtSmgfXjslaEjBg3maVl6tpdDJkZ3OKRJjqpAiEA1ZWWdcU/KyYVMZq1KWWnfZ8PPig3OCZzWmpe+qJZT9w="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.1.0-beta.1_1588605479947_0.20426717779984727"},"_hasShrinkwrap":false,"deprecated":"test flight version deprecated"},"1.1.0-beta.2":{"name":"vue2-timepicker","version":"1.1.0-beta.2","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","readme":"# Vue2 Timepicker  \n\n![GitHub version](https://img.shields.io/github/package-json/v/phoenixwong/vue2-timepicker?color=success&style=flat-square)\n![npm version](https://img.shields.io/npm/v/vue2-timepicker?style=flat-square)\n![GitHub release](https://img.shields.io/github/release/phoenixwong/vue2-timepicker?label=github&style=flat-square)\n![npm downloads](https://img.shields.io/npm/dm/vue2-timepicker?style=flat-square)\n\n---\n\n💡 Dead repo recharged 🔋\n\n---\n\nA dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.\n\n## Demo\n\nYou can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)\n\n## Migration\n\nPlease check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines if you are about to:\n\n- Migrate from the Vue 1.x version **[vue-time-picker](https://github.com/phoenixwong/vue-timepicker)**\n- Migrate from Bower to Yarn or NPM (Vue2 Timepicker `v0.1.x` -> `v0.2.0+`)\n\n\n## Dependencies\n\n[Vue.js](http://vuejs.org/)&nbsp;&nbsp;&nbsp;![npm peer dependency version](https://img.shields.io/npm/dependency-version/vue2-timepicker/peer/vue?style=flat-square)\n\n## Installation\n\n```bash\nyarn add vue2-timepicker\n```\n\n```bash\nnpm install vue2-timepicker --save\n```\n\n> NOTE: We stop Bower support from `0.2.0+`, please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md#migrating-from-bower-to-yarn-or-npm) for migration guidelines.\n\n## Get Started\n\n### **Step 1:** Import VueTimepicker\n\n#### **Option A:** Import component JS and CSS\n\n```javascript\n// Main JS (in UMD format)\nimport VueTimepicker from 'vue2-timepicker'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n```\n\n#### **Option B:** Choose any bundle version base on your needs\n\n**Javascript**\n\n```javascript\n// CommonJS\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'\n// UMD\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'\n// UMD Minified\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'\n```\n\n**CSS**\n\n```css\n@import 'vue2-timepicker/dist/VueTimepicker.css';\n\n/* Or, with node_module alias path like: */\n@import '~vue2-timepicker/dist/VueTimepicker.css';\n\n/*\n  NOTE: the path alias to `node_modules` differs between bundlers.\n  Please change the `~` to any alias that works with your environment.\n */\n```\n\n**Single File Component**\n\n```javascript\n// The *.vue file with CSS included\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n// NOTE: In some cases, it requires additional workarounds in the bundler's config\n```\n\n#### **SSR Usage**\n\n```javascript\n// Import the *.vue file (CSS included)\nimport VueTimepicker from 'vue2-timepicker/sfc'\n// Note the `/sfc` suffix here\n```\n\nIf your server-side renderer cannot recognize the `/sfc` alias, please try --\n\n```javascript\n// Manually point to the `/src` folder\nimport VueTimepicker from 'vue2-timepicker/src'\n// Or, to the specific file name\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n```\n\n### **Step 2**: Include VueTimepicker in your component\n\n```javascript\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  ...\n})\n```\n\n### **Step 3**: Put `vue-timepicker` in your component's template\n\nThen, you can introduce the `vue-timepicker` tag anywhere you like in your component's template\n\n```html\n<vue-timepicker></vue-timepicker>\n```\n\n\n## Basic Usage\n\n### Base\n\n```html\n<!-- Default to 24-Hour format HH:mm -->\n<vue-timepicker></vue-timepicker>\n```\n\n### Customized Time Format\n\n```html\n<!-- Show seconds picker -->\n<vue-timepicker format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- 12-hour format, with AM/PM picker -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n\n<!-- 12-hour format, with seconds picker and am/pm picker -->\n<vue-timepicker format=\"hh:mm:ss a\"></vue-timepicker>\n```\n\nVueTimepicker recognizes the following tokens in the format string\n\nSection    | Token | Output\n---------- | ----- | ---------------\n**AM/PM**  | A     | AM PM\n&nbsp;     | a     | am pm\n**Hour**   | H     | 0 1 ... 22 23\n&nbsp;     | HH    | 00 01 ... 22 23\n&nbsp;     | h     | 1 2 ... 11 12\n&nbsp;     | hh    | 01 02 ... 11 12\n&nbsp;     | k     | 1 2 ... 23 24\n&nbsp;     | kk    | 01 02 ... 23 24\n**Minute** | m     | 0 1 ... 58 59\n&nbsp;     | mm    | 00 01 ... 58 59\n**Second** | s     | 0 1 ... 58 59\n&nbsp;     | ss    | 00 01 ... 58 59\n\n> If not set, the `format` string is default to \"HH:mm\"\n\n### Customized Picker Interval\n\n```html\n<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->\n<vue-timepicker :minute-interval=\"5\"></vue-timepicker>\n\n<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->\n<vue-timepicker :second-interval=\"10\"></vue-timepicker>\n\n<!-- Bind interval config with your own data variable -->\n<vue-timepicker :minute-interval=\"yourMinuteInterval\"></vue-timepicker>\n```\n\n\n## Data Binding\n\n### Bind Value with `v-model`\n\nFrom `v1.0.0+`, timepicker's `v-model` accepts value in both _Object_ (default) and _String_ format. The `v0.x` versions only support _Object_ form.\n\n#### Set Initial Value\n\nFor example, if you want to set \"10:05:00\" (\"HH:mm:ss\" format) as the initial value of vue-timepicker:\n\n```javascript\nconst yourComponent = new Vue({\n  components: { VueTimepicker },\n  data () {\n    return {\n      // Object form\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      // String form\n      yourStringTimeValue: '10:05:00',\n      ...\n    }\n  },\n  ...\n})\n```\n\nBoth forms lead to the same result.\n\n```html\n<!-- Object form -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- String form -->\n<vue-timepicker v-model=\"yourStringTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n#### Set Empty Initial Value\n\nWhen the initial value is completely unknown:\n\n```javascript\ndata () {\n  return {\n    // Will be rendered as Object form\n    yourEmptyValue: {},\n    emptyValueToo: undefined,\n    emptyValueAsWell: null,\n\n    // Will be taken into String form\n    yourEmptyStringValue: ''\n  }\n}\n```\n\n#### Set Partially-Known Initial Value\n\nFor instance, if you want to set the initial hour value to **8 pm** and leave the rest slots empty:\n\n```javascript\ndata () {\n  return {\n    // OBJECT FORM\n    // Default 24-Hour\n    timeValue: {\n      HH: '20',\n      mm: ''\n    },\n    // 12-Hour with seconds\n    timeValueWithSec: {\n      h: '8',\n      mm: '',\n      ss: '',\n      A: 'PM'\n    },\n\n    // STRING FORM\n    // Default 24-Hour + String value\n    stringTimeValue: '20:mm',\n    // 12-Hour with seconds + String value\n    stringTimeValueWithSec: '8:mm:ss PM'\n  }\n}\n```\n\n```html\n<!-- OBJECT FORM -->\n<!-- Default 24-Hour -->\n<vue-timepicker v-model=\"timeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds -->\n<vue-timepicker v-model=\"timeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n\n<!-- STRING FORM -->\n<!-- Default 24-Hour + String value -->\n<vue-timepicker v-model=\"stringTimeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds + String value -->\n<vue-timepicker v-model=\"stringTimeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n```\n\n### Get Time Picker's Current Value\n\n#### Get value from `v-model`\n\nYou can either read the binding `v-model` value anytime or add a handler to deal with the `input` event from vue-timepicker.\n\n```html\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\" @input=\"inputHandler\"></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      ...\n    }\n  },\n\n  methods: {\n    inputHandler (eventData) {\n      console.log(eventData)\n    }\n  }\n}\n\n```\n\nIn 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.\n\n```javascript\n// In `inputHandler`:\n// console.log outputs -> {HH: \"14\", mm: \"30\", ss: \"15\"}\n```\n\n### Read Data From `change` Event\n\n```html\n<!-- A: No argument -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"changeHandler\"></vue-timepicker>\n\n<!-- B: Custom arguments -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"otherChangeHandler($event, 'foo', 42)\"></vue-timepicker>\n```\n\n```javascript\n// A: No argument\nchangeHandler (eventData) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n}\n\n// B: Custom arguments\notherChangeHandler (eventData, yourArg1, yourArg2) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n  console.log(yourArg1)\n  // -> 'foo'\n  console.log(yourArg2)\n  // -> 42\n}\n```\n\nUnlike `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.\n\nIn the example above, after the user set values to \"14:30:15\" in the picker, `change` event returns the following data:\n\n```javascript\n// `@change` event data\n{\n  data: {\n    HH: \"14\",\n    H: \"14\",\n    hh: \"14\",\n    a: \"am\",\n    A: \"AM\",\n    h: \"14\",\n    kk: \"14\",\n    k: \"14\",\n    m: \"30\",\n    mm: \"30\",\n    s: \"15\",\n    ss: \"15\"\n  },\n  // extra `displayTime` added since v0.2.2\n  displayTime: \"14:30:15\"\n}\n```\n\nWhereas the `v-model` / `input` only return the data with defined tokens\n\n```javascript\n// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}\n// Hence, the `v-model` returns:\n{\n  HH: \"14\",\n  mm: \"30\",\n  ss: \"15\"\n}\n```\n\n## Advance Usage\n\n### Hide Clear Button\n\n```html\n<vue-timepicker hide-clear-button></vue-timepicker>\n```\n\nEnable to hide the \"&times;\" clear button on the right-hand side. Users can still pick new values from the dropdown, but they cannot erase any selected data.\n\n### Disable Picker\n\n```html\n<vue-timepicker disabled></vue-timepicker>\n```\n\nFully disable both dropdown picker and the \"&times;\" clear button in the UI, to prevent users from changing any values again.\n\n### Close on Complete\n\nAutomatically close the dropdown when the user finishes selecting **all** of the required fields.\n\n```html\n<vue-timepicker close-on-complete></vue-timepicker>\n```\n\n### Define Hour Range\n\nSometimes you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.\n\n```html\n<!-- 24-Hour Format -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\"></vue-timepicker>\n<!-- >> Equals to :hour-range=\"[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]\" -->\n\n<!-- 12-Hour Format -->\n<vue-timepicker :hour-range=\"['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']\" format=\"hh:mm a\">\n<!-- >> Equals to :hour-range=\"['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']\" -->\n```\n\n### Set Minute and Second Range\n\nSimilar to `hour-range`, you can determine values in the minutes and seconds dropdown by using `minute-range` and `second-range`.\n\n```html\n<!-- Minute range -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 00, 06, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n\n<!-- Second range -->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 0, 6, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n```\n\nWhen implemented together with `minute-interval` and `second-interval`, the customized intervals take the priority.\n\n```html\n<!-- Minute range + 5-minute interval -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\" :minute-interval=\"5\"></vue-timepicker>\n<!-- >> Active Items: 00, 10, 15, 20, 25, 30, 50 -->\n\n<!-- Second range + 10-second interval-->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\" :second-interval=\"10\"></vue-timepicker>\n<!-- >> Active Items: 0, 10, 20, 30, 50 -->\n```\n\n### Hide Disabled Items\n\nThere're four kinds of helper properties to let you hide the values excluded by `hour-range`, `minute-range`, and `second-range`.\n\n- **hide-disabled-items**: Hide **all** disabled items - hour, minute, and seconds.\n- **hide-disabled-hours**: Hide disabled **hour** values only.\n- **hide-disabled-minutes**: Hide disabled **minute** values only.\n- **hide-disabled-seconds**: Hide disabled **second** values only.\n\n```html\n<!-- `hide-disabled-hours` sample -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\" hide-disabled-hours></vue-timepicker>\n```\n\nHere 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.\n\n### Advanced Keyboard Support\n\nBasic keyboard support includes:\n\n- **Tab**: Focus or blur the Timepicker\n- **Esc**: Close the dropdown\n\nAdvance Keyboard support (enabled with `advanced-keyboard`):\n\n- **Arrow Keys**: Navigate between valid (non-disabled) values and columns\n- **Space** or **Enter**: Select the focusing item\n\n```html\n<vue-timepicker advanced-keyboard></vue-timepicker>\n```\n\nPlease 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.\n\n### Manual Input Support\n\n```html\n<vue-timepicker manual-input></vue-timepicker>\n```\nLet users add or change values through the `<input>` box besides the dropdown picker.\n\n### Blur Delay\n\n```html\n<!-- Unit: million second -->\n<vue-timepicker :blur-delay=\"500\"></vue-timepicker>\n```\n\nSets the blur delay time for the dropdown. Defaults to `300` if not set.\n\n### Lazy Event Mode\n\n```html\n<vue-timepicker lazy></vue-timepicker>\n```\n\nWhen `lazy` event mode is toggled on, only an actual user behavior can trigger the `input` and `change` events. Which are:\n\n- The user opened the dropdown and picked a new value\n- The user clicked the (\"x\") clear button\n\nIn other words, on `lazy` mode, Timepicker won't emit `input` and `change` events on mounted, nor after the value got modified programmatically.\n\n### Auto-Scroll\n\n```html\n<vue-timepicker auto-scroll></vue-timepicker>\n```\n\nAuto-scroll to selected values on dropdown open. It works with both:\n\n- Programmatically defined value. E.g., the initial value from `v-model`\n- Values manually picked by the user.\n\n\n### Enable Debug Mode\n\n```html\n<vue-timepicker debug-mode></vue-timepicker>\n```\n\nIt'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.\n\nLet's create a \"bug\" here as an example --\n\n```html\n<!-- Manual Bug Sample: Define timepicker with format \"h:mm:ss A\" -->\n<vue-timepicker v-model=\"yourStringValue\" format=\"h:mm:ss A\" debug-mode></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      // Manual Bug Sample:\n      // Should be '3:mm:05 A' but oops.. the finger slipped\n      yourStringValue: 'e:mm:05 A'\n    }\n  }\n}\n```\n\nThen, in the console window, you should see a debug log saying:\n\n```console\nDEBUG: The input string in \"v-model\" does NOT match the \"format\" pattern\nformat: h:mm:ss A\nv-model: e:mm:05 A\n```\n\n## Main Props API Overview\n\nProp                      | Type               | Required | Default Value\n------------------------- | ------------------ | -------- | -------------\n**v-model**               | _Object_, _String_ | no       | _undefined_\n**format**                | _String_           | no       | \"HH:mm\"\n**minute-interval**       | _Number_           | no       | _undefined_\n**second-interval**       | _Number_           | no       | _undefined_\n**hide-clear-button**     | _Boolean_          | no       | false\n**disabled**              | _Boolean_          | no       | false\n**close-on-complete**     | _Boolean_          | no       | false\n**hour-range**            | _Array_            | no       | _undefined_\n**minute-range**          | _Array_            | no       | _undefined_\n**second-range**          | _Array_            | no       | _undefined_\n**hide-disabled-hours**   | _Boolean_          | no       | false\n**hide-disabled-minutes** | _Boolean_          | no       | false\n**hide-disabled-seconds** | _Boolean_          | no       | false\n**hide-disabled-items**   | _Boolean_          | no       | false\n**advanced-keyboard**     | _Boolean_          | no       | false\n**manual-input**          | _Boolean_          | no       | false\n**blur-delay**            | _Number_           | no       | 300\n**lazy**                  | _Boolean_          | no       | false\n**auto-scroll**           | _Boolean_          | no       | false\n**debug-mode**            | _Boolean_          | no       | false\n\n\n## Input Props API\n\nProp              | Type                        | Required | Default Value\n------------------| --------------------------- | -------- | -------------\n**id**            | _String_                    | no       | _undefined_\n**name**          | _String_                    | no       | _undefined_\n**placeholder**   | _String_                    | no       | _undefined_\n**tabindex**      | _Number_                    | no       | 0\n**autocomplete**  | _String_                    | no       | 'off'\n**input-class**   | _String_, _Array_, _Object_ | no       | _undefined_\n**input-width**   | _String_                    | no       | '10em'\n\nTimepicker 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.\n\n### Input `id`, `name` and `tabindex`\n\n```html\n<!-- id -->\n<vue-timepicker id=\"myFirstPicker\"></vue-timepicker>\n\n<!-- name -->\n<vue-timepicker name=\"nameInForm\"></vue-timepicker>\n\n<!-- tabindex -->\n<vue-timepicker :tabindex=\"5\"></vue-timepicker>\n```\n\n### Input `placeholder`\n\nWhen `placeholder` is undefined, timepicker takes the determined format string instead.\n\n```html\n<!-- placeholder is set -->\n<vue-timepicker placeholder=\"Start Time\"></vue-timepicker>\n<!-- -> \"Start Time\" -->\n\n<!-- placeholder not set -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n<!-- -> \"hh:mm A\" -->\n\n<!-- both placeholder and format are not set -->\n<vue-timepicker></vue-timepicker>\n<!-- -> \"HH:mm\" -->\n```\n\n### Input `autocomplete` Attribute\n\n> **NOTE:** To use this property, you MUST ENABLE the `manual-input` mode _(v.1.1.0+)_ in the first place.\n\n```html\n<!-- In Vue Template -->\n<vue-timepicker name=\"starttime\" autocomplete=\"on\" manual-input></vue-timepicker>\n```\n\n```html\n<!-- HTML result -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time\" name=\"starttime\" type=\"text\" autocomplete=\"on\">\n  <!-- ... -->\n</span>\n```\n\nWhen enabled, it accepts any string value supported by the HTML input `autocomplete` attribute. The value is assigned to the embedding text `<input>`, which means it follows form autofill rules and configs set in the browser level. For example, most of the browsers require the input to have a `name` and/or `id` attribute. Some browsers, like Firefox, demand the input to be a descendant of a `<form>` element.\n\nPlease refer to the [HTML documentation](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) and the developer guideline of each browser for more information (i.e., [MDN docs here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)).\n\n\n### The `input-class`\n\nThe `input-class` is assigned to the text input within the component as well.\n\n```html\n<!-- Set your own `input-class` in the Vue template -->\n<vue-timepicker input-class=\"my-awesome-picker\"></vue-timepicker>\n```\n\n```html\n<!-- HTML result -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time my-awesome-picker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n```\n\nStart from `v1.0.4`, besides _String_ format, `input-class` accepts value in _Array_ and _Object_ type as well.\n\n```html\n<!-- String type -->\n<vue-timepicker input-class=\"your-awesome-timepicker i-am-vue2-timepicker\"></vue-timepicker>\n\n<!-- Array type -->\n<vue-timepicker :input-class=\"['your-awesome-timepicker', 'i-am-vue2-timepicker']\"></vue-timepicker>\n\n<!-- Object type -->\n<vue-timepicker :input-class=\"{\n  'your-awesome-timepicker': true,\n  'foo': false,\n  'i-am-vue2-timepicker': true,\n  'bar': false\n}\"></vue-timepicker>\n```\n\n```html\n<!-- All of the three samples above return the same result in rendered HTML -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time your-awesome-timepicker i-am-vue2-timepicker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n```\n\n### The `input-width`\n\nThe `input-width` helps you to adjust both the `<input>` and the dropdown picker's width without overriding the CSS style on your own. It accepts any valid CSS width values like `8em`, `200px`, etc.\n\n```html\n<!-- In `px` -->\n<vue-timepicker input-width=\"100px\"></vue-timepicker>\n\n<!-- In `em` -->\n<vue-timepicker input-width=\"12em\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n\n## Events API\n\nEvent          | Arguments      | Description\n-------------- | -------------- | ----------------------\n**input**      | (_value_)      | Emit after value changes\n**change**     | (_eventData_)  | Emit after value changes\n**open**       | &nbsp;         | Emit when the dropdown opens\n**close**      | &nbsp;         | Emit when the dropdown closes\n**focus**      | &nbsp;         | Emit when the user start focusing on the Timepicker\n**blur**       | &nbsp;         | Emit when the user blurs the Timepicker\n**error**      | (_eventData_)  | Emit when the input value becomes invalid\n\n### The `open` and `close` Event of the Dropdown Picker\n\nHelp to identify the current status of the dropdown picker\n\n```javascript\ndata () {\n  return {\n    dropdownStatus: 'closed'\n  }\n}\n```\n\n```html\n<p>Dropdown Status: I'm {{dropdownStatus}}!</p>\n\n<vue-timepicker @open=\"dropdownStatus = 'opened'\" @close=\"dropdownStatus = 'closed'\"></vue-timepicker>\n```\n\n### The `focus` and `blur` Event\n\nHelp to identify focus/blur state of the Vue Timepicker. Especially useful in cases where the dropdown is force hidden by `hide-dropdown` under the Manual Input mode. \n\n```javascript\ndata () {\n  return {\n    focusState: 'blurred'\n  }\n}\n```\n\n```html\n<p>Focus State: I'm {{focusState}}!</p>\n\n<vue-timepicker manual-input hide-dropdown @focus=\"focusState = 'focused'\" @blur=\"focusState = 'blurred'\"></vue-timepicker>\n```\n\n### The `error` event\n\nStarts from `v.1.1.0+`, Timepicker will emit an `error` event when the current input value becomes invalid. E.g., when it contains an hour value that is not in the `hour-range` list or a minute value that doesn't fit in the `minute-interval`.\n\n```html\n<!-- Got the `hour-range` and `minute-interval` set -->\n<!-- And add a hanlder to pick up the \"error\" event -->\n<vue-timepicker format=\"H:mm:ss\" v-model=\"erroredInputSample\" :hour-range=\"[8, 9, 10, 11]\" :minute-interval=\"5\" @error=\"errorHanlder\"></vue-timepicker>\n```\n\n```javascript\ndata () {\n  return {\n    erroredInputSample: { H: '5', mm: '03', ss: '00' }\n    // NOTE:\n    // H: '5' -> invalid. Value is not in the `hour-range` list\n    // mm: '03' -> invalid. Value does not fit in the `minute-interval`\n    // ss: '00' -> valid.\n  }\n},\n\nmethods: {\n  errorHanlder (eventData) {\n    console.log(eventData)\n    // console.log outputs -> [\"hour\", \"minute\"]\n  }\n}\n```\n\nThe `error` event returns an _Array_ of invalid fields' names.\n\n> NOTE: Empty value will **not** be marked as invalid.\n\n\n## Helper CSS Class Names\n\nStarted from `v.1.1.0+`, Vue Timepicker will add additional CSS classes to the `<input>` element base on the state of the current input value.\n\n- **invalid**: One or more fields containing an invalid or disabled value.\n  - Additional CSS Style: The `<input>` border turns red.\n- **is-empty**: The input value (_v-model_) is empty. No additional style.\n- **all-selected**: All fields (hour/minute/second/apm) required by the `format` string are not empty. No additional style.\n\n\n## Miscellaneous Props API\n\nProp                    | Type      | Required | Default Value\n----------------------- | --------- | -------- | -------------\n**hour-label**          | _String_  | no       | _undefined_\n**minute-label**        | _String_  | no       | _undefined_\n**second-label**        | _String_  | no       | _undefined_\n**apm-label**           | _String_  | no       | _undefined_\n**am-text**             | _String_  | no       | _undefined_\n**pm-text**             | _String_  | no       | _undefined_\n\n### Customized Picker Labels\n\nYou can define customized labels on top of the hour, minute, second, and APM pickers with the following properties: `hour-label`, `minute-label`, `second-label`, and `apm-label`. \n\nFurthermore, you can replace those _am/pm_ (or _AM/PM_) string by setting the `am-text` and `pm-text` parameters.\n\n> Please note that these two parameters only change the labels expose to the users (the UI level). The `v-model` value and `displayTime` value returned by the `change` event (the data level) still use the standard _am_/_pm_ (_AM_/_PM_) format.\n\n```html\n<!-- 24-hour format with customized hour and minute label -->\n<vue-timepicker hour-label=\"heure\" minute-label=\"minute\"></vue-timepicker>\n\n<!-- 12-hour format with customized am/pm text -->\n<vue-timepicker hour-label=\"時\" minute-label=\"分\" second-label=\"秒\" apm-label=\"午\" am-text=\"上午\" pm-text=\"下午\" format=\"h:mm:ss a\"></vue-timepicker>\n```\n\n## Contribution\n\nPlease feel free to fork and help developing. Check [CONTRIBUTING.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CONTRIBUTING.md) for more details.\n\n## Change Log\n\nDetail changes of each release: [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)\n\n## License\n\n[MIT](https://github.com/phoenixwong/vue2-timepicker/blob/master/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"dc49c2c7ebd48c64be10215baf06d354712f5a09","_id":"vue2-timepicker@1.1.0-beta.2","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-BLRb8IPGEpPliBoSdWGSAKaBbtuSE3kT5tnTbjhNjiBC+0CvmYlG3F9OvgZkoM7kLDByxuHDQRbPEbbLMzodcw==","shasum":"645c0a172e2cccb7a3a49fe1c5415b90d0eaea62","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.0-beta.2.tgz","fileCount":16,"unpackedSize":1503897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuXTvCRA9TVsSAnZWagAAXvMP/24wJdF6pFZsKuWIioUz\nayhPZrCo7ALBPDsMRd5Ulf5Vio2Pd3MF9b8GT4/oNglIdnpnhPzPJvAjI9rf\n1N2oknvhqI5sJ60eDxv4mg0A4/SM30yZHJufceTtbB0dR6ZRPgzxxMUT5QVy\nE6oV6Fl99ZijDIaA2KJoWDh4NrvMMeQRcxEZs5Y/giFs5pC8ZE+ABxPBDVIW\n4YxheIBNzed0B7f5XIoGvJP5KCZCphtXnhJzLnIBKyLya63o5xk4m52cmZeK\n5yU7Yfo/saraKYniTcuBCdqce04NE1ecNLjYtsy/WypIej8tby9kwCJWv4ck\nWs12QLEqXnQLqKi8yuWUZV2UORHMVYMkD7tO2U+pVNCpRfPx9IYAzjORC2JB\nd0kSAfCtpiQ6eneku5rA2f1hRW/yBMWTXBwKq8iWSnvXl7gW26GQE5y1R5YG\n9gsRS57NBPylvDmCk0Eh5dyP35CgfrXQzQudt+5prOVDmepzUCA0km/r8ta4\nBBtKV85HNK/QDu+bIM07IF8fUdlN6Sdu9J9ISJxaWZ28v3k7tTGoYBuHKbSl\nf1C757Na4cmW9aB/qnh4AJ0QV/d1AAuNN3KWtPGA1Y7XniPtsY5raOq5mkNR\n8db6iWTSG8Br3lS3+QjzBydOvNnlsn+Jcr9iIzPYCVcDIjfba1M4LQle+swn\noR6h\r\n=iyQH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXy94YE7YrqI4cKp2208G44DFV5dLjIFzV287g0FurRAiBTxvHDRXtXF45cw6zaSgnzLEXVrQkxk/OCKUl/n1R1vQ=="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.1.0-beta.2_1589212398767_0.30213328854251853"},"_hasShrinkwrap":false,"deprecated":"test flight version deprecated"},"1.1.0":{"name":"vue2-timepicker","version":"1.1.0","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","scripts":{"dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install","build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","unpkg":"dist/VueTimepicker.umd.min.js","css":"dist/VueTimepicker.css","browser":{"./sfc":"src/vue-timepicker.vue"},"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"keywords":["vue","vue2","time","picker","dropdown","input","UI"],"devDependencies":{"@vue/cli-plugin-babel":"^3.11.0","@vue/cli-plugin-eslint":"^3.11.0","@vue/cli-service":"^3.11.0","babel-eslint":"^10.0.3","core-js":"^2.6.9","eslint":"^5.16.0","eslint-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","gitHead":"3520c9ffd6ac040d3b9941f90616d77813fd043d","_id":"vue2-timepicker@1.1.0","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-DICPpbiuk4SUfIbCutt5B0FYLiRJLa8E9zk59bh+wKPUKPydiqMpvDeZfCf9UsbbBnSbJfcNCXyno3CBz/L1Cg==","shasum":"ebf74adf5386dc1ae8686fe250630beb23d16463","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.0.tgz","fileCount":16,"unpackedSize":1511544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewWS4CRA9TVsSAnZWagAA/ngQAJ7Ak0z25S6ophPUWyJz\n4f3KwgNknbkgkRCV0puf+wnX2JYVsabDUy6q40+LBzsaGUods+/H49ON1ypV\n3EkXjgScP6JmzJfEvOvBxlH113Wc5EEpOEgjKj9AyZtIsFH6wJT0FVFbJDkr\nNetyw4zbf0LT7upSz6iO46uDM1Jh1Zc4Jm8JNpe2k/NL2w2VSDEwhJ1pTS0v\nJW2922DBDEhWA1Zufl8OjNYBCBOOh7DSLlRjQKgetuTzqQ8XRJgKocYBsxCD\ny2U8KncxI08X79BzyYuidiIbXzKYRb1MBQlUya3tGLQOeMnl7aZ9tpFXW+8T\nQkj4ZYWQvvOQFEsDa5QGAxmRu7yAfAcejMBTkYaIAtCpffMSmhqtdiy2SOT6\ncmDj0fuCrCgQu51uGM62uAka7MwqNIiebyCfCwaRJM5+brvDWzIllRmyNiYl\n/FNu3ckSjR3RR+faW3T8YJhVdQ02AO8Z/Bpbw+jgsUaI1ZkFOmXozgrfWDzH\nI1y59MilVl5kRt3qD3u0eAMvHBn9xvGm6VaBQZTipH3kh9oZO4cjREFTo8in\nFhYFr3JhqpnSKdTErpw1xXFuHQC0NPgGPXikpx1RRgLmupJz1zl1FTSCRL8r\ncS9N4LiYxJyAvYVCDK9ZRop3f3hW1quAO+PUDDWDun8fWrZ97f+t88yv9yyT\nUf0n\r\n=m6UK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0zECEje2GVbXJPJbBVVmutmoDz/YdOCeUUCN/XLOcegIgYlDBLY5N1UsSYw3vSLY6mCylkn+KZyz35myhtMXmKrI="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.1.0_1589732535956_0.3067012783860936"},"_hasShrinkwrap":false},"1.1.1":{"name":"vue2-timepicker","version":"1.1.1","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"scripts":{"build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build","dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","browser":{"./sfc":"src/vue-timepicker.vue"},"unpkg":"dist/VueTimepicker.umd.min.js","devDependencies":{"@vue/cli-plugin-babel":"~4.3.1","@vue/cli-plugin-eslint":"~4.3.1","@vue/cli-service":"~4.3.1","babel-eslint":"^10.1.0","core-js":"^3.6.5","eslint":"^6.8.0","eslint-plugin-vue":"^6.2.2","vue":"^2.6.11","vue-template-compiler":"^2.6.11"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"css":"dist/VueTimepicker.css","homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","keywords":["vue","vue2","time","picker","dropdown","input","UI"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"gitHead":"750a756b29f41f90c259b4f92d282075d1d91dc7","_id":"vue2-timepicker@1.1.1","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-cYZJhk1cRz5jIXxkUm/gDqkHwe7ujSNTwJ6qvfCRC+zvVDixszYvkAcwglIzkeymNmWCq2QBKO+RQLp8ntfxpw==","shasum":"2942578743c9be455f9da5f4f9e6a1d021b0e194","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.1.tgz","fileCount":16,"unpackedSize":1633407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeyp53CRA9TVsSAnZWagAA4HMP/Rx1ahURQNe+YOXb1+Cz\nI+zYNirBJYVBPHod5IZatDm8oNPg9r/QlOw/PUCr2hWf3hZN2R2CNkqSXmsP\nWH6v6gV859gl0lQW0+6Doc5adlRhIs/zhKAn7Q6D4grtOmKl3tT5kqmCOVwR\nMBEVtZa7IeY5pNCfdLLNPOnTyaTiCO/Px0FrsWcEB7j7RRN7a/GwtaTGKTHa\nkZb/RVBBQn19ObrljYDF+3AldmmUFhN1FwEfd64+9cAHsmmuce9lVyN/jUiq\nFryD7IHqXUgTamef4DF2jnC2xO4vPqNBHEPzrPQc82qMhxYY2GQoU1e2CK3e\nK03gs9SjqCRiPvwLgsdxCgXTzgjAR26ywJ0p04fMxVYgB/YYcGu3+VdLE7KZ\njSwoWg3MT6/GUUCIQe7pget2CEaUVYWNd0GzcW5um95nVnU6zIWoyIi4Hthj\nIwov8ms+aiHdsGRbDS156kXiI2z4Io70tpO5Cc694na6sOqUPVmE+OGaOmFf\nrKI8IIBuDNB0XQjVbYXSzQqp2SkzivCtjq6bMcgh301DD7F836s1mbhBy9v6\nz7xnSPxVmHn7QwFCICEGIroHj9j85IhanRTFcS+KJnlQFlIb+/PdaKcXdk+F\n62udScdkWfVhye/8+raWQzAuz/pPsBf6C7IkDfb2TeUL2f44LkLxBUvw0PKE\n69zc\r\n=aLOn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEWSOfwVQM3dbXhrNC4okTTXmxOdJZbdVICVbw2yrgNQIhAMLNyOWDmt5191X3nRnNRUoF7KrzvIzRHX9FGJwXp8OH"}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.1.1_1590337142680_0.49599225397837565"},"_hasShrinkwrap":false},"1.1.2":{"name":"vue2-timepicker","version":"1.1.2","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"scripts":{"build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build","dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","browser":{"./sfc":"src/vue-timepicker.vue"},"unpkg":"dist/VueTimepicker.umd.min.js","devDependencies":{"@vue/cli-plugin-babel":"~4.3.1","@vue/cli-plugin-eslint":"~4.3.1","@vue/cli-service":"~4.3.1","babel-eslint":"^10.1.0","core-js":"^3.6.5","eslint":"^6.8.0","eslint-plugin-vue":"^6.2.2","vue":"^2.6.11","vue-template-compiler":"^2.6.11"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"css":"dist/VueTimepicker.css","homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","keywords":["vue","vue2","time","picker","dropdown","input","UI"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"gitHead":"58acf189d3c35a0b554f33962f08646464996365","_id":"vue2-timepicker@1.1.2","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-kjAvjQ0q/UkdsaWQ2mUfNvYGRzDN8qJeRA6MPFj76kp7dVeMt5vwUYg2ZR5QvenR9Mug0W8ZZ5H+lwmcZsXdkg==","shasum":"052627861a090f42b1d566bf71beb0360e26935a","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.2.tgz","fileCount":16,"unpackedSize":1628363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe09CICRA9TVsSAnZWagAAyEkP/3isGcgZLv2hGyyHAchu\n2bUMbfUAb3LgEX9cpYJ0/oToRok6lGJV77pmqfa9t9nuEG9ieAL47k94RP4C\nrZlRPEToCr60VkzFvFL7+vxC9bQBP1HERlgMjYVQRpS0gMI/D+5D+/5CjkUs\nksmMy27XV7mSchMoXljiEhTSWw4+7uqcLOamv9VLgsnVsOr0EexrHqtcXU9n\nv6jrfcH9JHwoXqsOSuotuJR9YZtJhjElKUyznfNmu4r/B77WlYy3TpRYstDc\nphUSsb3hYfOi6ca2uf/57PUyO103Ub5To42+RTsPkprUObZdYCVNUpo7QQ5E\nu4mnmBrH2uxZ76gfoC+v15rAiL8yCyk+GLbGsFWSn0RhOFlS9LKwOGnYDkR1\nz8JtxvigWknqd19TopegOM9Cz4sS4QAJhCFBkNXaJAZKMPbBqOoMYSvJ6xik\nG7EBL7TD88wAHuna+f5QsMQfPvR8/AdVvfVEc1ECSHat+hD14H6I7y/VvWFU\nyY7rhisqEYDbQUO5QGxrsN9eh6P3OrKVBt12TCWS74Ny3ISEXlMlLq0aJTh0\na5YkmMo9FIIxt5YKtOuGCEew5QdmnjCqhVfr98iwQAA3S8HvXVQfuMu6pDmJ\nXCj+9vhwT9wuSPYm56RZApXOXj9qtY5G/5w/mripVQWY914w3UAIcmILVMAi\ndvcd\r\n=+nLa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd96le/bsbwEUgOko+dr4L0hCk9fbvYPigu6EJg3VlfQIgYLSVYOOf09d3+nT1m+qpH1ioeWaZW4LLoTaLESIWXaI="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.1.2_1590939783902_0.6434605174130943"},"_hasShrinkwrap":false},"1.1.3":{"name":"vue2-timepicker","version":"1.1.3","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"scripts":{"build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build","dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","browser":{"./sfc":"src/vue-timepicker.vue"},"unpkg":"dist/VueTimepicker.umd.min.js","devDependencies":{"@vue/cli-plugin-babel":"~4.3.1","@vue/cli-plugin-eslint":"~4.3.1","@vue/cli-service":"~4.3.1","babel-eslint":"^10.1.0","core-js":"^3.6.5","eslint":"^6.8.0","eslint-plugin-vue":"^6.2.2","vue":"^2.6.11","vue-template-compiler":"^2.6.11"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"css":"dist/VueTimepicker.css","homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","keywords":["vue","vue2","time","picker","dropdown","input","UI"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"gitHead":"7d54c949dff07e0b5fea29c54ddf8e26c6fb97ee","_id":"vue2-timepicker@1.1.3","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-mn2V2pNwed+BnVfynARo4dr2tqMc8a3SIbgFWV4x8FPn0ZIkjKqT0lgiulYJbZNTh2AFWfbocKJPVxMRYuquwg==","shasum":"d52ab4d6f094b2dbba071e5f557a760729a2eec5","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.3.tgz","fileCount":16,"unpackedSize":1638449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5j3jCRA9TVsSAnZWagAAue4P/3VKLE0+1xLrvXE+z7q0\nGEYlXHK4JNoIuY2JgmCeukp9i32Wecr147org8U6SsF+xahA2kBjAfetOryu\nx3rxg6ltFMWRDnPyNkaWH7CsqIjsQ07ue/Q81Jzj11vrIRrIrKdA+Pwbd/R+\nKDo+IHyeIbPaZXe7aZAYh1xmR9vJZcDr+6JRlmSFg5hTEIPVbkGW4mk1yb60\neYXhGy+RMEUBbflGcsVLLu3M12p1t9vHDPw7Ae/rrW7wQv84Py36tjyt2+lz\nX79OI+vXInNLrNf/6DkRT2kd1Egc7QzkuLBj5qGrAz4LNcLVMmQjcwmkwxLC\nEUg+bdHIRZmxGkku6Ed8Z92YedtoJIdE51JtpRR5lrz1PRvUhpHkGLnWQ+iY\n6C6Jz1ZedQ94MlOkDdC/2MrRTdnT+nZgkIv60Wtbf4IXN7dI4RzQvDzdCqvQ\n/9U1adyTvxGWqecBIjmHSx4k3+320+a386UEmwPvXpUbjPfm52vDo2IgAsfe\nrbkcHhgkkqzTC7MGy1/Tupwe4pHRzsGAeSa1gOxzVpLFi6/pcNpbkJPOO9Q6\niS8uvYOAMUwjcT+2bgP2gqPjaVMnqZVICHFskvqZE7FGm8mtZERT07g9Cxgj\ncQ1W0h992v4wW2ct7NZzExnic13bMr8Ay/iKqmieRk8n5YJgaLROzvNfjJcj\nK4dh\r\n=okoz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbbEOgiWcVwgQK5x9OicbicnDRaONfTZMgv14BZcYP1AiB0zBCwAplD+f5hCuBUJWaJos4s/0vISbljMorM+HcIQA=="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.1.3_1592147426458_0.5604175471002522"},"_hasShrinkwrap":false},"1.1.4":{"name":"vue2-timepicker","version":"1.1.4","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"scripts":{"build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build","dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","browser":{"./sfc":"src/vue-timepicker.vue"},"unpkg":"dist/VueTimepicker.umd.min.js","devDependencies":{"@vue/cli-plugin-babel":"~4.3.1","@vue/cli-plugin-eslint":"~4.3.1","@vue/cli-service":"~4.3.1","babel-eslint":"^10.1.0","core-js":"^3.6.5","eslint":"^6.8.0","eslint-plugin-vue":"^6.2.2","vue":"^2.6.11","vue-template-compiler":"^2.6.11"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"css":"dist/VueTimepicker.css","homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","keywords":["vue","vue2","time","picker","dropdown","input","UI"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"gitHead":"dffcb206ab16eab4ee4adc8eb7f9b9844ed07abd","_id":"vue2-timepicker@1.1.4","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-v3ceIfiNN+lhBQcjIbG3CV0wC0dxSRt/P6Eqo35ZkrQfUjWrrpHkqL1dP2vYKZNkwYvYkAK/CKtYHl7QV8ToGQ==","shasum":"57eb8a461052461c3d6503ca861bc671e181c39b","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.4.tgz","fileCount":16,"unpackedSize":1651278,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOSOvCRA9TVsSAnZWagAAAY4P/2egPH6IgMcgsDqUbAb8\nhlX9A0X7BHY95pGhdwKT/M2xlx+B5IzMEQKyMCMBMp9iknbmr4GGOXJGfgei\nVe76EI0yDpPlWYCl90g+hbyab6AoMOVPA/9+Hlif7/Zb0br4tzety2WT5hoI\nqfm5ZCBqUe7b4McsY/Lvm3atKtEOmuREwNfWHkYEBrTIyjH+kl+W/z+W8n6s\nKJS68czChtu1pPhj3Kxn95iluiCGHCj7zdD113ZcPfNcLjyrTmjK4aadZojx\nFQ9rp3T4yl/BufiWH5sxyY7x6MjywbM2L1qzsXyEZEFzvS1QsFreftjr8KwY\nqQiif9moCqX44BvyRebbvdCpnCooOBoH2t664gxmZMNLZujFui6ulbiNf5he\nuwB6wEbfdR7Y/r11Mgpvj8N/TgDhwyjbXTLF0ABbG0CjsrsskXuoak0iNorm\n2F5+dGZDFdVlQJC38P1uRMkdBNVt1OLoeIjJ69oGdBHXGLvck9fqPE4VGGjF\njgLTlPLsJK0N+gDDVPVNvW/E+Uhoa8BUL33UxHQlk9DDl3nqonGwAcqV1pep\nSl8LP8mcsqc336Sgx9aXNp6t/sa2VPPJVsACCyIJAwBKJVy0gyV1rhXCXV0l\n/j1KPT7QAmtt5XrQAXmgY7ns+DYWzPhrNXnEfk3XOKbViOUKM8VrvPVtwblU\nv3y+\r\n=FOMr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5Jv70iOlkj4yLj36GkJhiCwPBTSUStbojO1DWMJ6lEQIhAK6vmc+sQ7dhetQE021RMVD4/0Qroe4bW6OnYcwwLBTc"}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.1.4_1597580206493_0.4488697659625376"},"_hasShrinkwrap":false},"1.1.5":{"name":"vue2-timepicker","version":"1.1.5","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"scripts":{"build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build","dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","browser":{"./sfc":"src/vue-timepicker.vue"},"unpkg":"dist/VueTimepicker.umd.min.js","devDependencies":{"@vue/cli-plugin-babel":"~4.3.1","@vue/cli-plugin-eslint":"~4.3.1","@vue/cli-service":"~4.3.1","babel-eslint":"^10.1.0","core-js":"^3.6.5","eslint":"^6.8.0","eslint-plugin-vue":"^6.2.2","vue":"^2.6.11","vue-template-compiler":"^2.6.11"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"css":"dist/VueTimepicker.css","homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","keywords":["vue","vue2","time","picker","dropdown","input","UI"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"gitHead":"55e05d8369009f3bd058757e0d4818671e06d98d","_id":"vue2-timepicker@1.1.5","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-jMbw3BhVguuukwfzO7jvS2Ais7zDX/I9OjFO59IZU7cNv9EfxFAcU7MxDK85FwJLsSTm+ZTMIXAZPnGLLrFLwA==","shasum":"5a93cefb540679772af6ea6cd826a039e2c18827","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.5.tgz","fileCount":16,"unpackedSize":1668172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZ3AVCRA9TVsSAnZWagAAdcsQAII2aRJS3zlEp+wyjfQS\nUKc51a1a/wC6tbj2yuPGJ5KToo/5QkLWSJrzbFJh4wVOksMWQXrpKO+fKFFv\nPhCmcQ8O6Cegh2jOVq7FmKvxA+bMEsWT1Pz0eZKOtTAkwpgmDoLktPOWqEsB\nuYmeOERUuV3hH38ourLuk9hmnuZnwM4FmmkqRiZTiGlvS9XKOYLglcH5ZD4W\n8JD7XLlIpLN1HwYBQj2TZ9/2gqv2LusXLku41kSo+aLkG4es8+GtI/huWH/w\n3Vl+X/X66ecPz2OPebYlvA3ak5rhuiBhQT8d1s40skQ3DbJY0L9eN/pXNFkg\nMaVXXdpYexEDT4J22wlFtFtcqtGWRkGRyrvv5I9zyHe0jpJOksIseaHW9Zsk\nKv1ur7HSrLFUxL2vEjpIWVp8aV/Uq5vhcQ0qVjvboLEEj1+hw16JZt/QUHAZ\npx2EUWuhT5frusD/PxHj6Z7IrLX1PsROf6HZ7lHvUZNVwS8/JmKxjJV18hKi\nSAw47qFmCOcxr45KnePnjZoCUElWAWzIIchzr0oRIWnOFGKAVD4pHKOFpjge\nEdMR7Vk8Si48jXztTBSiU78TixvKtvHLET/YnTbtY89rP3ulBHIxySB3zimC\n2ADLg4Bav6I+ERsbvbMOBKZIK/3eGNedgJ1uhrdyKr6ZgDwUadW35wxyLlAz\nHC6z\r\n=6Pql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIClzy2/cdtu1j/8BwICkkiYhe0w+2DKZEwj+nOyPP2eRAiEA2L/sbhAaVvkTGgRuome331WSr5bD394CKIXAV/mG5Vg="}]},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.1.5_1600614421037_0.3224060957248722"},"_hasShrinkwrap":false},"1.1.6":{"name":"vue2-timepicker","version":"1.1.6","description":"A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support","author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"scripts":{"build":"vue-cli-service build --target lib --name VueTimepicker ./src/index.js","build:demo":"cd demo && yarn build","dev":"cd demo && yarn serve","dev:init":"cd demo && yarn install"},"main":"dist/VueTimepicker.umd.js","module":"dist/VueTimepicker.common.js","browser":{"./sfc":"src/vue-timepicker.vue"},"unpkg":"dist/VueTimepicker.umd.min.js","devDependencies":{"@vue/cli-plugin-babel":"~4.3.1","@vue/cli-plugin-eslint":"~4.3.1","@vue/cli-service":"~4.3.1","babel-eslint":"^10.1.0","core-js":"^3.6.5","eslint":"^6.8.0","eslint-plugin-vue":"^6.2.2","vue":"^2.6.11","vue-template-compiler":"^2.6.11"},"peerDependencies":{"vue":"^2.6.5"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended"],"rules":{},"parserOptions":{"parser":"babel-eslint"}},"postcss":{"plugins":{"autoprefixer":{}}},"browserslist":["> 1%","last 2 versions"],"bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"css":"dist/VueTimepicker.css","homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","keywords":["vue","vue2","time","picker","dropdown","input","UI"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"gitHead":"35d1856004a5e3e8728a3f137998c79624976e74","_id":"vue2-timepicker@1.1.6","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-DhO2UH4CTer/lMWxg+jqxn/+h6g2vZrsM6vCe9u7/Ie+Pej9yA+8mQA3C3VPApZ+LauKc43WxCspOXb6SGBOTw==","shasum":"d74df71e3992c7073aa503d3e71d729d114be3da","tarball":"https://registry.npmjs.org/vue2-timepicker/-/vue2-timepicker-1.1.6.tgz","fileCount":16,"unpackedSize":1710687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBGQQCRA9TVsSAnZWagAAr1kQAKQJxYV4bTJ+2g1sQC29\nZ5Z/w2JnyVj6KQ+gBtj7kGF/PYoObKzmUL+1f1HZAOZKB4e/wwchORvv72+B\ngrtMq8xBAqL5XfoH/mRkMeAAOBTNtUPNMaGVHtXIjirGcpaXNLGVEHitKB5G\nJAjp6EPlO/8Pky7o7XfaYu4ZhCqo0eVZB33//fncwpTHr3WzPN+pokpACrou\ns55sRc8IMAE/5pVrKzncVy/vLfblN+mhXfZcgjkhqJvZJAXaNBLPH0Riuclz\nZLdeyxNZPTtc5OllLwev/EOC0WiHTpaad1NMhxzsUy0YfFt6X5T/WhqRRf8k\n798to1gM3sl4tRgVCeFfiMbsmsvHBEjfBOuNaGW6b9A2LY6C4rEXuKBWxjY+\n8f2Lmr06PwlWhhRSqkIwpxFUqVMG5SeLEWJmltqbTc98eNwLDcOxL8yPSfaC\nAJP5etWEA5bFQCX/VRzaEnUbxZxAY5KNtjQ3jicxwFiGQroGiu2LN5bjDg2W\nPxorfE5u+v0kH/IpJxd7/ZRlHrsWN60KovhbAQdE7LzlyFCTkVOa7dx52F80\nNTKve5Y49qDa/2BBWp6WjsS/SHX8d/SCuY/nOvZ0PhcF7siXXJT0vquQD32w\n+J3J4ysYGO+Xw9uPDzmCCJIJCQZlAiExp/lUk4pQ70ZFp3sraf+Csnx4Q5D3\nJly4\r\n=PrLt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFvSNg3xPON6hUXSl9Y4RfHVzG2aAMiac9KXadTm/gMZAiBVDcyr+hD2xCsBM4i6/SLBjvDc8lXXX5cHPsz0hETvyw=="}]},"_npmUser":{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"},"directories":{},"maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-timepicker_1.1.6_1610900496173_0.48634269976034705"},"_hasShrinkwrap":false}},"readme":"# Vue2 Timepicker  \n\n![GitHub version](https://img.shields.io/github/package-json/v/phoenixwong/vue2-timepicker?color=success&style=flat-square)\n![npm version](https://img.shields.io/npm/v/vue2-timepicker?style=flat-square)\n![GitHub release](https://img.shields.io/github/release/phoenixwong/vue2-timepicker?label=github&style=flat-square)\n![npm downloads](https://img.shields.io/npm/dm/vue2-timepicker?style=flat-square)\n\n---\n\n💡 Dead repo recharged 🔋\n\n---\n\nA dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.\n\n## Demo\n\nYou can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)\n\n## Migration\n\nPlease check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines if you are about to:\n\n- Migrate from the Vue 1.x version **[vue-time-picker](https://github.com/phoenixwong/vue-timepicker)**\n- Migrate from Bower to Yarn or NPM (Vue2 Timepicker `v0.1.x` -> `v0.2.0+`)\n\n\n## Dependencies\n\n[Vue.js](http://vuejs.org/)&nbsp;&nbsp;&nbsp;![npm peer dependency version](https://img.shields.io/npm/dependency-version/vue2-timepicker/peer/vue?style=flat-square)\n\n## Installation\n\n```bash\nyarn add vue2-timepicker\n```\n\n```bash\nnpm install vue2-timepicker --save\n```\n\n> NOTE: We stop Bower support from `0.2.0+`, please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md#migrating-from-bower-to-yarn-or-npm) for migration guidelines.\n\n## Get Started\n\n### **Step 1:** Import VueTimepicker\n\n#### **Option A:** Import component JS and CSS\n\n```javascript\n// Main JS (in UMD format)\nimport VueTimepicker from 'vue2-timepicker'\n\n// CSS\nimport 'vue2-timepicker/dist/VueTimepicker.css'\n```\n\n#### **Option B:** Choose any bundle version base on your needs\n\n**Javascript**\n\n```javascript\n// CommonJS\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'\n// UMD\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'\n// UMD Minified\nimport VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'\n```\n\n**CSS**\n\n```css\n@import 'vue2-timepicker/dist/VueTimepicker.css';\n\n/* Or, with node_module alias path like: */\n@import '~vue2-timepicker/dist/VueTimepicker.css';\n\n/*\n  NOTE: the path alias to `node_modules` differs between bundlers.\n  Please change the `~` to any alias that works with your environment.\n */\n```\n\n**Single File Component**\n\n```javascript\n// The *.vue file with CSS included\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n// NOTE: In some cases, it requires additional workarounds in the bundler's config\n```\n\n#### **SSR Usage**\n\n```javascript\n// Import the *.vue file (CSS included)\nimport VueTimepicker from 'vue2-timepicker/sfc'\n// Note the `/sfc` suffix here\n```\n\nIf your server-side renderer cannot recognize the `/sfc` alias, please try --\n\n```javascript\n// Manually point to the `/src` folder\nimport VueTimepicker from 'vue2-timepicker/src'\n// Or, to the specific file name\nimport VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'\n```\n\n### **Step 2**: Include VueTimepicker in your component\n\n```javascript\nvar yourComponent = new Vue({\n  components: { VueTimepicker },\n  ...\n})\n```\n\n### **Step 3**: Put `vue-timepicker` in your component's template\n\nThen, you can introduce the `vue-timepicker` tag anywhere you like in your component's template\n\n```html\n<vue-timepicker></vue-timepicker>\n```\n\n\n## Basic Usage\n\n### Base\n\n```html\n<!-- Default to 24-Hour format HH:mm -->\n<vue-timepicker></vue-timepicker>\n```\n\n### Customized Time Format\n\n```html\n<!-- Show seconds picker -->\n<vue-timepicker format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- 12-hour format, with AM/PM picker -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n\n<!-- 12-hour format, with seconds picker and am/pm picker -->\n<vue-timepicker format=\"hh:mm:ss a\"></vue-timepicker>\n```\n\nVueTimepicker recognizes the following tokens in the format string\n\nSection    | Token | Output\n---------- | ----- | ---------------\n**AM/PM**  | A     | AM PM\n&nbsp;     | a     | am pm\n**Hour**   | H     | 0 1 ... 22 23\n&nbsp;     | HH    | 00 01 ... 22 23\n&nbsp;     | h     | 1 2 ... 11 12\n&nbsp;     | hh    | 01 02 ... 11 12\n&nbsp;     | k     | 1 2 ... 23 24\n&nbsp;     | kk    | 01 02 ... 23 24\n**Minute** | m     | 0 1 ... 58 59\n&nbsp;     | mm    | 00 01 ... 58 59\n**Second** | s     | 0 1 ... 58 59\n&nbsp;     | ss    | 00 01 ... 58 59\n\n> If not set, the `format` string is default to \"HH:mm\"\n\n### Customized Picker Interval\n\n```html\n<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->\n<vue-timepicker :minute-interval=\"5\"></vue-timepicker>\n\n<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->\n<vue-timepicker :second-interval=\"10\"></vue-timepicker>\n\n<!-- Bind interval config with your own data variable -->\n<vue-timepicker :minute-interval=\"yourMinuteInterval\"></vue-timepicker>\n```\n\n\n## Data Binding\n\n### Bind Value with `v-model`\n\nFrom `v1.0.0+`, timepicker's `v-model` accepts value in both _Object_ (default) and _String_ format. The `v0.x` versions only support _Object_ form.\n\n#### Set Initial Value\n\nFor example, if you want to set \"10:05:00\" (\"HH:mm:ss\" format) as the initial value of vue-timepicker:\n\n```javascript\nconst yourComponent = new Vue({\n  components: { VueTimepicker },\n  data () {\n    return {\n      // Object form\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      // String form\n      yourStringTimeValue: '10:05:00',\n      ...\n    }\n  },\n  ...\n})\n```\n\nBoth forms lead to the same result.\n\n```html\n<!-- Object form -->\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n\n<!-- String form -->\n<vue-timepicker v-model=\"yourStringTimeValue\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n#### Set Empty Initial Value\n\nWhen the initial value is completely unknown:\n\n```javascript\ndata () {\n  return {\n    // Will be rendered as Object form\n    yourEmptyValue: {},\n    emptyValueToo: undefined,\n    emptyValueAsWell: null,\n\n    // Will be taken into String form\n    yourEmptyStringValue: ''\n  }\n}\n```\n\n#### Set Partially-Known Initial Value\n\nFor instance, if you want to set the initial hour value to **8 pm** and leave the rest slots empty:\n\n```javascript\ndata () {\n  return {\n    // OBJECT FORM\n    // Default 24-Hour\n    timeValue: {\n      HH: '20',\n      mm: ''\n    },\n    // 12-Hour with seconds\n    timeValueWithSec: {\n      h: '8',\n      mm: '',\n      ss: '',\n      A: 'PM'\n    },\n\n    // STRING FORM\n    // Default 24-Hour + String value\n    stringTimeValue: '20:mm',\n    // 12-Hour with seconds + String value\n    stringTimeValueWithSec: '8:mm:ss PM'\n  }\n}\n```\n\n```html\n<!-- OBJECT FORM -->\n<!-- Default 24-Hour -->\n<vue-timepicker v-model=\"timeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds -->\n<vue-timepicker v-model=\"timeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n\n<!-- STRING FORM -->\n<!-- Default 24-Hour + String value -->\n<vue-timepicker v-model=\"stringTimeValue\"></vue-timepicker>\n<!-- 12-Hour with seconds + String value -->\n<vue-timepicker v-model=\"stringTimeValueWithSec\" format=\"h:mm:ss A\"></vue-timepicker>\n```\n\n### Get Time Picker's Current Value\n\n#### Get value from `v-model`\n\nYou can either read the binding `v-model` value anytime or add a handler to deal with the `input` event from vue-timepicker.\n\n```html\n<vue-timepicker v-model=\"yourTimeValue\" format=\"HH:mm:ss\" @input=\"inputHandler\"></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      yourTimeValue: {\n        HH: '10',\n        mm: '05',\n        ss: '00'\n      },\n      ...\n    }\n  },\n\n  methods: {\n    inputHandler (eventData) {\n      console.log(eventData)\n    }\n  }\n}\n\n```\n\nIn 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.\n\n```javascript\n// In `inputHandler`:\n// console.log outputs -> {HH: \"14\", mm: \"30\", ss: \"15\"}\n```\n\n### Read Data From `change` Event\n\n```html\n<!-- A: No argument -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"changeHandler\"></vue-timepicker>\n\n<!-- B: Custom arguments -->\n<vue-timepicker v-model=\"yourTimeValue\" @change=\"otherChangeHandler($event, 'foo', 42)\"></vue-timepicker>\n```\n\n```javascript\n// A: No argument\nchangeHandler (eventData) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n}\n\n// B: Custom arguments\notherChangeHandler (eventData, yourArg1, yourArg2) {\n  console.log(eventData)\n  // -> {data: {HH:..., mm:... }, displayTime: \"HH:mm\"}\n  console.log(yourArg1)\n  // -> 'foo'\n  console.log(yourArg2)\n  // -> 42\n}\n```\n\nUnlike `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.\n\nIn the example above, after the user set values to \"14:30:15\" in the picker, `change` event returns the following data:\n\n```javascript\n// `@change` event data\n{\n  data: {\n    HH: \"14\",\n    H: \"14\",\n    hh: \"14\",\n    a: \"am\",\n    A: \"AM\",\n    h: \"14\",\n    kk: \"14\",\n    k: \"14\",\n    m: \"30\",\n    mm: \"30\",\n    s: \"15\",\n    ss: \"15\"\n  },\n  // extra `displayTime` added since v0.2.2\n  displayTime: \"14:30:15\"\n}\n```\n\nWhereas the `v-model` / `input` only return the data with defined tokens\n\n```javascript\n// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}\n// Hence, the `v-model` returns:\n{\n  HH: \"14\",\n  mm: \"30\",\n  ss: \"15\"\n}\n```\n\n## Advance Usage\n\n### Hide Clear Button\n\n```html\n<vue-timepicker hide-clear-button></vue-timepicker>\n```\n\nEnable to hide the \"&times;\" clear button on the right-hand side. Users can still pick new values from the dropdown, but they cannot erase any selected data.\n\n### Disable Picker\n\n```html\n<vue-timepicker disabled></vue-timepicker>\n```\n\nFully disable both dropdown picker and the \"&times;\" clear button in the UI, to prevent users from changing any values again.\n\n### Close on Complete\n\nAutomatically close the dropdown when the user finishes selecting **all** of the required fields.\n\n```html\n<vue-timepicker close-on-complete></vue-timepicker>\n```\n\n### Auto-Scroll\n\n```html\n<vue-timepicker auto-scroll></vue-timepicker>\n```\n\nAuto-scroll to selected values on dropdown open. It works with both:\n\n- Programmatically defined value. E.g., the initial value from `v-model`\n- Values manually picked by the user.\n\n### Define Hour Range\n\nSometimes you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.\n\n```html\n<!-- 24-Hour Format -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\"></vue-timepicker>\n<!-- >> Equals to :hour-range=\"[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]\" -->\n\n<!-- 12-Hour Format -->\n<vue-timepicker :hour-range=\"['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']\" format=\"hh:mm a\">\n<!-- >> Equals to :hour-range=\"['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']\" -->\n```\n\n### Set Minute and Second Range\n\nSimilar to `hour-range`, you can determine values in the minutes and seconds dropdown by using `minute-range` and `second-range`.\n\n```html\n<!-- Minute range -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 00, 06, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n\n<!-- Second range -->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\"></vue-timepicker>\n<!-- >> Active Items: 0, 6, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->\n```\n\nWhen implemented together with `minute-interval` and `second-interval`, the customized intervals take the priority.\n\n```html\n<!-- Minute range + 5-minute interval -->\n<vue-timepicker :minute-range=\"[0, 6, [10, 30], 42, 50]\" :minute-interval=\"5\"></vue-timepicker>\n<!-- >> Active Items: 00, 10, 15, 20, 25, 30, 50 -->\n\n<!-- Second range + 10-second interval-->\n<vue-timepicker format=\"H:m:s\" :second-range=\"[0, 6, [10, 30], 42, 50]\" :second-interval=\"10\"></vue-timepicker>\n<!-- >> Active Items: 0, 10, 20, 30, 50 -->\n```\n\n### Hide Disabled Items\n\nThere're four kinds of helper properties to let you hide the values excluded by `hour-range`, `minute-range`, and `second-range`.\n\n- **hide-disabled-items**: Hide **all** disabled items - hour, minute, and seconds.\n- **hide-disabled-hours**: Hide disabled **hour** values only.\n- **hide-disabled-minutes**: Hide disabled **minute** values only.\n- **hide-disabled-seconds**: Hide disabled **second** values only.\n\n```html\n<!-- `hide-disabled-hours` sample -->\n<vue-timepicker :hour-range=\"[5, [8, 12], [14, 17], 19]\" hide-disabled-hours></vue-timepicker>\n```\n\nHere 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.\n\n### Advanced Keyboard Support\n\nBasic keyboard support includes:\n\n- **Tab**: Focus or blur the Timepicker\n- **Esc**: Close the dropdown\n\nAdvance Keyboard support (enabled with `advanced-keyboard`):\n\n- **Arrow Keys**: Navigate between valid (non-disabled) values and columns\n- **Space** or **Enter**: Select the focusing item\n\n```html\n<vue-timepicker advanced-keyboard></vue-timepicker>\n```\n\nPlease 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.\n\n### Blur Delay\n\n```html\n<!-- Unit: million second -->\n<vue-timepicker :blur-delay=\"500\"></vue-timepicker>\n```\n\nSets the blur delay time for the dropdown. Defaults to `300` if not set.\n\n### Manual Input Support\n\n```html\n<vue-timepicker manual-input></vue-timepicker>\n```\nLet users add or change values through the `<input>` box besides the dropdown picker.\n\n### Manual Input Timeout\n\n```html\n<!-- Unit: million second -->\n<vue-timepicker :manual-input-timeout=\"1500\"></vue-timepicker>\n```\n\nWorks with **manual-input** mode. It sets the timeout for continuous input. Defaults to `1000` if not set.\n\n**How It Works?**\n\nFor example, when a user focuses on the **hour** slot (`HH`) of a `\"HH:mm\"` formatted Timepicker (with the default value `1000`):\n\n- **Case 1:** User first inputs `1`, and then inputs `2` _500ms_ later -> Timepicker takes `12` as the final value and set it to the `\"HH\"` slot.\n- **Case 2:** User inputs `1`, and then presses the key `2` _1200ms_ later -> Timepicker takes `2` as the final value and set it to `02` for the `\"HH\"` slot.\n\n### Hide Dropdown\n\n> **NOTE:** To use this feature, you MUST ENABLE the `manual-input` mode _(v.1.1.0+)_ in the first place.\n\nIt makes the dropdown picker hidden by default.\n\n```html\n<vue-timepicker manual-input hide-dropdown></vue-timepicker>\n```\n\nUsers can still choose to open the dropdown by clicking the triangle (\"&dtrif;\") button on the right. _(v.1.1.3+)_\n\n### Fixed Dropdown Button\n\n```html\n<vue-timepicker fixed-dropdown-button></vue-timepicker>\n```\n\nMake the dropdown button always visible in the UI. _(v.1.1.4+)_\n\n### Drop Direction\n\nChange dropdown direction when needed _(v.1.1.5+)_. Accepting values:\n\n- **down**: Default value.\n- **up**: Force open the dropdown above the input.\n- **auto**: Auto detects available height and opens the dropdown on top if there are not enough spaces below the input.\n\n```html\n<!-- Force drop up -->\n<vue-timepicker drop-direction=\"up\"></vue-timepicker>\n\n<!-- Auto drop direction  -->\n<vue-timepicker drop-direction=\"auto\"></vue-timepicker>\n```\n\n#### Container ID\n\nWorks with `drop-direction=\"auto\"`. It defines the parent container where the timepicker should calculate the free spaces from. If this value is not set, timepicker will watch `document.body` instead.\n\n```html\n<!-- Parent Container ID: \"auto-dropdown-containter\" -->\n<div id=\"auto-dropdown-containter\">\n  <!-- Defined Container -->\n  <vue-timepicker drop-direction=\"auto\" container-id=\"auto-dropdown-containter\"></vue-timepicker>\n\n  <!-- Default (document body) -->\n  <vue-timepicker drop-direction=\"auto\"></vue-timepicker>\n</div>\n```\n\n#### Drop Offset Height\n\nWorks with `drop-direction=\"auto\"` either. Defaults to `160` (unit: _px_) if the value is not set.\n\n```html\n<!--\n  When the available bottom space is less than 200px,\n  open the dropdown above the input.\n-->\n<vue-timepicker drop-direction=\"auto\" :drop-offset-height=\"200\"></vue-timepicker>\n```\n\n### Lazy Event Mode\n\n```html\n<vue-timepicker lazy></vue-timepicker>\n```\n\nWhen `lazy` event mode is toggled on, only an actual user behavior can trigger the `input` and `change` events. Which are:\n\n- The user opened the dropdown and picked a new value\n- The user clicked the (\"&times;\") clear button\n- The user inputted a new value or clear the existing value in the Manual Input mode\n\nIn other words, on `lazy` mode, Timepicker won't emit `input` and `change` events on mounted, nor after the value got modified programmatically.\n\n\n### Append To Body\n\nAppend the dropdown menu to the end of the document `<body>`. Try this if you have `z-index` or `overflow` layout issue with the dropdown.\n\n```html\n<vue-timepicker append-to-body></vue-timepicker>\n```\n\nThe body-appended dropdown's CSS class is `vue__time-picker-dropdown`. Its default `z-index` is `100`. You can change the value by adding the following style in your app -- \n\n```css\n/* E.g. set the z-index to 5000 */\n.vue__time-picker-dropdown {\n  z-index: 5000;\n}\n```\n\n**NOTE**: If you have to override some of the CSS styles within the dropdown, you will need to update their selectors' class names as well. Simply change any `.vue__time-picker .dropdown` selector to `.vue__time-picker-dropdown`.\n\nFor example, when you have a customized background color set for selected values:\n\n```css\n/* Default override (not using \"append-to-body\") */\n.vue__time-picker .dropdown ul li:not([disabled]).active {\n  background: steelblue;\n}\n\n/* When using \"append-to-body\" */\n.vue__time-picker-dropdown ul li:not([disabled]).active {\n  background: steelblue;\n}\n```\n\n### Enable Debug Mode\n\n```html\n<vue-timepicker debug-mode></vue-timepicker>\n```\n\nIt'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.\n\nLet's create a \"bug\" here as an example --\n\n```html\n<!-- Manual Bug Sample: Define timepicker with format \"h:mm:ss A\" -->\n<vue-timepicker v-model=\"yourStringValue\" format=\"h:mm:ss A\" debug-mode></vue-timepicker>\n```\n\n```javascript\n{\n  data () {\n    return {\n      // Manual Bug Sample:\n      // Should be '3:mm:05 A' but oops.. the finger slipped\n      yourStringValue: 'e:mm:05 A'\n    }\n  }\n}\n```\n\nThen, in the console window, you should see a debug log saying:\n\n```console\nDEBUG: The input string in \"v-model\" does NOT match the \"format\" pattern\nformat: h:mm:ss A\nv-model: e:mm:05 A\n```\n\n## Main Props API Overview\n\nProp                      | Type               | Required | Default Value\n------------------------- | ------------------ | -------- | -------------\n**v-model**               | _Object_, _String_ | no       | _undefined_\n**format**                | _String_           | no       | \"HH:mm\"\n**minute-interval**       | _Number_           | no       | _undefined_\n**second-interval**       | _Number_           | no       | _undefined_\n**hide-clear-button**     | _Boolean_          | no       | false\n**disabled**              | _Boolean_          | no       | false\n**close-on-complete**     | _Boolean_          | no       | false\n**auto-scroll**           | _Boolean_          | no       | false\n**hour-range**            | _Array_            | no       | _undefined_\n**minute-range**          | _Array_            | no       | _undefined_\n**second-range**          | _Array_            | no       | _undefined_\n**hide-disabled-hours**   | _Boolean_          | no       | false\n**hide-disabled-minutes** | _Boolean_          | no       | false\n**hide-disabled-seconds** | _Boolean_          | no       | false\n**hide-disabled-items**   | _Boolean_          | no       | false\n**advanced-keyboard**     | _Boolean_          | no       | false\n**blur-delay**            | _Number_           | no       | 300\n**manual-input**          | _Boolean_          | no       | false\n**manual-input-timeout**  | _Number_           | no       | 1000\n**hide-dropdown**         | _Boolean_          | no       | false\n**fixed-dropdown-button** | _Boolean_          | no       | false\n**drop-direction**        | _String_           | no       | \"down\"\n**container-id**          | _String_           | no       | _undefined_\n**drop-offset-height**    | _Number_           | no       | 160\n**lazy**                  | _Boolean_          | no       | false\n**append-to-body**        | _Boolean_          | no       | false\n**debug-mode**            | _Boolean_          | no       | false\n\n\n## Input Props API\n\nProp              | Type                        | Required | Default Value\n------------------| --------------------------- | -------- | -------------\n**id**            | _String_                    | no       | _undefined_\n**name**          | _String_                    | no       | _undefined_\n**placeholder**   | _String_                    | no       | _undefined_\n**tabindex**      | _Number_                    | no       | 0\n**autocomplete**  | _String_                    | no       | 'off'\n**input-class**   | _String_, _Array_, _Object_ | no       | _undefined_\n**input-width**   | _String_                    | no       | '10em'\n\nTimepicker 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.\n\n### Input `id`, `name` and `tabindex`\n\n```html\n<!-- id -->\n<vue-timepicker id=\"myFirstPicker\"></vue-timepicker>\n\n<!-- name -->\n<vue-timepicker name=\"nameInForm\"></vue-timepicker>\n\n<!-- tabindex -->\n<vue-timepicker :tabindex=\"5\"></vue-timepicker>\n```\n\n### Input `placeholder`\n\nWhen `placeholder` is undefined, timepicker takes the determined format string instead.\n\n```html\n<!-- placeholder is set -->\n<vue-timepicker placeholder=\"Start Time\"></vue-timepicker>\n<!-- -> \"Start Time\" -->\n\n<!-- placeholder not set -->\n<vue-timepicker format=\"hh:mm A\"></vue-timepicker>\n<!-- -> \"hh:mm A\" -->\n\n<!-- both placeholder and format are not set -->\n<vue-timepicker></vue-timepicker>\n<!-- -> \"HH:mm\" -->\n```\n\n### Input `autocomplete` Attribute\n\n> **NOTE:** To use this property, you MUST ENABLE the `manual-input` mode _(v.1.1.0+)_ in the first place.\n\n```html\n<!-- In Vue Template -->\n<vue-timepicker name=\"starttime\" autocomplete=\"on\" manual-input></vue-timepicker>\n```\n\n```html\n<!-- HTML result -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time\" name=\"starttime\" type=\"text\" autocomplete=\"on\">\n  <!-- ... -->\n</span>\n```\n\nWhen enabled, it accepts any string value supported by the HTML input `autocomplete` attribute. The value is assigned to the embedding text `<input>`, which means it follows form autofill rules and configs set in the browser level. For example, most of the browsers require the input to have a `name` and/or `id` attribute. Some browsers, like Firefox, demand the input to be a descendant of a `<form>` element.\n\nPlease refer to the [HTML documentation](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) and the developer guideline of each browser for more information (i.e., [MDN docs here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)).\n\n\n### The `input-class`\n\nThe `input-class` is assigned to the text input within the component as well.\n\n```html\n<!-- Set your own `input-class` in the Vue template -->\n<vue-timepicker input-class=\"my-awesome-picker\"></vue-timepicker>\n```\n\n```html\n<!-- HTML result -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time my-awesome-picker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n```\n\nStart from `v1.0.4`, besides _String_ format, `input-class` accepts value in _Array_ and _Object_ type as well.\n\n```html\n<!-- String type -->\n<vue-timepicker input-class=\"your-awesome-timepicker i-am-vue2-timepicker\"></vue-timepicker>\n\n<!-- Array type -->\n<vue-timepicker :input-class=\"['your-awesome-timepicker', 'i-am-vue2-timepicker']\"></vue-timepicker>\n\n<!-- Object type -->\n<vue-timepicker :input-class=\"{\n  'your-awesome-timepicker': true,\n  'foo': false,\n  'i-am-vue2-timepicker': true,\n  'bar': false\n}\"></vue-timepicker>\n```\n\n```html\n<!-- All of the three samples above return the same result in rendered HTML -->\n<span class=\"vue__time-picker time-picker\">\n  <input class=\"display-time your-awesome-timepicker i-am-vue2-timepicker\" type=\"text\" readonly=\"readonly\">\n  <!-- ... -->\n</span>\n```\n\n### The `input-width`\n\nThe `input-width` helps you to adjust both the `<input>` and the dropdown picker's width without overriding the CSS style on your own. It accepts any valid CSS width values like `8em`, `200px`, etc.\n\n```html\n<!-- In `px` -->\n<vue-timepicker input-width=\"100px\"></vue-timepicker>\n\n<!-- In `em` -->\n<vue-timepicker input-width=\"12em\" format=\"HH:mm:ss\"></vue-timepicker>\n```\n\n\n## Events API\n\nEvent          | Arguments      | Description\n-------------- | -------------- | ----------------------\n**input**      | (_value_)      | Emit after value changes\n**change**     | (_eventData_)  | Emit after value changes\n**open**       | &nbsp;         | Emit when the dropdown opens\n**close**      | &nbsp;         | Emit when the dropdown closes\n**focus**      | &nbsp;         | Emit when the user start focusing on the `<input>`\n**blur**       | &nbsp;         | Emit when the user blurs the `<input>`\n**error**      | (_eventData_)  | Emit when the input value becomes invalid\n\n### The `open` and `close` Event of the Dropdown Picker\n\nHelp to identify the current status of the dropdown picker\n\n```javascript\ndata () {\n  return {\n    dropdownStatus: 'closed'\n  }\n}\n```\n\n```html\n<p>Dropdown Status: I'm {{dropdownStatus}}!</p>\n\n<vue-timepicker @open=\"dropdownStatus = 'opened'\" @close=\"dropdownStatus = 'closed'\"></vue-timepicker>\n```\n\n### The `focus` and `blur` Event\n\nIt works with the Manual Input mode, aimed to identify the focus/blur state of the `<input>` box. Specially useful in cases where the dropdown is force hidden by `hide-dropdown`.\n\n```javascript\ndata () {\n  return {\n    focusState: 'blurred'\n  }\n}\n```\n\n```html\n<p>Focus State: {{focusState}}</p>\n\n<vue-timepicker manual-input hide-dropdown @focus=\"focusState = 'focused'\" @blur=\"focusState = 'blurred'\"></vue-timepicker>\n```\n\n### The `error` event\n\nStarts from `v.1.1.0+`, Timepicker will emit an `error` event when the current input value becomes invalid. E.g., when it contains an hour value that is not in the `hour-range` list or a minute value that doesn't fit in the `minute-interval`.\n\n```html\n<!-- Got the `hour-range` and `minute-interval` set -->\n<!-- And add a hanlder to pick up the \"error\" event -->\n<vue-timepicker format=\"H:mm:ss\" v-model=\"erroredInputSample\" :hour-range=\"[8, 9, 10, 11]\" :minute-interval=\"5\" @error=\"errorHanlder\"></vue-timepicker>\n```\n\n```javascript\ndata () {\n  return {\n    erroredInputSample: { H: '5', mm: '03', ss: '00' }\n    // NOTE:\n    // H: '5' -> invalid. Value is not in the `hour-range` list\n    // mm: '03' -> invalid. Value does not fit in the `minute-interval`\n    // ss: '00' -> valid.\n  }\n},\n\nmethods: {\n  errorHanlder (eventData) {\n    console.log(eventData)\n    // console.log outputs -> [\"hour\", \"minute\"]\n  }\n}\n```\n\nThe `error` event returns an _Array_ of invalid fields' names. When it returns an empty array `[]`, it means the current input is valid, and all previous errors are gone\n\n> NOTE: Empty value will **not** be marked as invalid.\n\n\n## Helper CSS Class Names\n\nStarted from `v.1.1.0+`, Vue Timepicker will add additional CSS classes to the `<input>` element base on the state of the current input value.\n\n- **invalid**: One or more fields containing an invalid or disabled value.\n  - Additional CSS Style: The `<input>` border turns red.\n  - If you want to mute this red border style, add `\"skip-error-style\"` to `input-class`\n- **is-empty**: The input value (_v-model_) is empty. No additional style.\n- **all-selected**: All fields (hour/minute/second/apm) required by the `format` string are not empty. No additional style.\n\n```html\n<!-- To mute the red border style of \"invalid\" state -->\n<timepicker input-class=\"skip-error-style\"></timepicker>\n<timepicker :input-class=\"['skip-error-style', 'your-other-class-names']\"></timepicker>\n```\n\n\n## Miscellaneous Props API\n\nProp                    | Type      | Required | Default Value\n----------------------- | --------- | -------- | -------------\n**hour-label**          | _String_  | no       | _undefined_\n**minute-label**        | _String_  | no       | _undefined_\n**second-label**        | _String_  | no       | _undefined_\n**apm-label**           | _String_  | no       | _undefined_\n**am-text**             | _String_  | no       | _undefined_\n**pm-text**             | _String_  | no       | _undefined_\n\n### Customized Picker Labels\n\nYou can define customized labels on top of the hour, minute, second, and APM pickers with the following properties: `hour-label`, `minute-label`, `second-label`, and `apm-label`. \n\nFurthermore, you can replace those _am/pm_ (or _AM/PM_) string by setting the `am-text` and `pm-text` parameters.\n\n> Please note that these two parameters only change the labels expose to the users (the UI level). The `v-model` value and `displayTime` value returned by the `change` event (the data level) still use the standard _am_/_pm_ (_AM_/_PM_) format.\n\n```html\n<!-- 24-hour format with customized hour and minute label -->\n<vue-timepicker hour-label=\"heure\" minute-label=\"minute\"></vue-timepicker>\n\n<!-- 12-hour format with customized am/pm text -->\n<vue-timepicker hour-label=\"時\" minute-label=\"分\" second-label=\"秒\" apm-label=\"午\" am-text=\"上午\" pm-text=\"下午\" format=\"h:mm:ss a\"></vue-timepicker>\n```\n\n\n## Slots\n\nWe introduce three slots in `v.1.1.4` to help you customize the clear button, the dropdown button, and the input icon with your own icon/image.\n\nSlot Name          | Position | Description   \n------------------ | -------- | --------------\n**icon**           | _left_   | On the lefthand side of the `<input>`\n**clearButton**    | _right_  | In the same spot of the default clear button\n**dropdownButton** | _right_  | In the same spot of the default dropdown button\n\n> Please note that Vue v2.6.0+ introduces a significant update of the Named Slots syntax. Check the [official documentation](https://vuejs.org/v2/guide/components-slots.html#Named-Slots) for more information.\n\n```html\n<!-- For Vue 2.6.0+ -->\n\n<!-- Input icon (image) -->\n<vue-timepicker>\n  <template v-slot:icon>\n    <img src=\"$YOUR_ICON_SRC\" />\n  </template>\n</vue-timepicker>\n\n<!-- Customized clear button (image) -->\n<vue-timepicker>\n  <template v-slot:clearButton>\n    <img src=\"$YOUR_CUSTOM_IMAGE_SRC\" />\n  </template>\n</vue-timepicker>\n\n<!-- Customized dropdown button (character entity) -->\n<vue-timepicker manual-input hide-dropdown>\n  <template v-slot:dropdownButton>&#x02263;</template>\n</vue-timepicker>\n```\n\n## Contribution\n\nPlease feel free to fork and help developing. Check [CONTRIBUTING.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CONTRIBUTING.md) for more details.\n\n## Change Log\n\nDetail changes of each release: [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)\n\n## License\n\n[MIT](https://github.com/phoenixwong/vue2-timepicker/blob/master/LICENSE.md)\n","maintainers":[{"name":"phoenixwong","email":"phoenixyfwong@gmail.com"}],"time":{"modified":"2022-06-28T20:49:59.396Z","created":"2016-10-28T18:33:18.899Z","0.1.0":"2016-10-28T18:33:18.899Z","0.1.1":"2016-10-29T14:32:41.368Z","0.1.2":"2016-11-05T06:26:46.479Z","0.1.3":"2016-11-08T16:15:35.615Z","0.1.4":"2016-11-11T13:40:42.808Z","0.2.0-beta.0":"2019-08-05T16:42:00.944Z","0.2.0-beta.1":"2019-08-06T16:59:00.357Z","0.2.0-beta.2":"2019-08-06T18:14:48.800Z","0.2.0-beta.3":"2019-08-07T03:00:45.637Z","0.2.0":"2019-08-07T03:32:42.408Z","0.2.1-alpha.0":"2019-08-09T16:09:55.865Z","0.2.1":"2019-08-09T16:32:51.698Z","0.2.2-alpha.0":"2019-08-10T09:43:34.536Z","0.2.2":"2019-08-10T10:03:52.936Z","0.2.2-rc.0":"2019-08-12T15:40:19.706Z","1.0.0-beta.0":"2019-08-24T11:25:52.226Z","1.0.0-beta.1":"2019-08-26T16:20:01.471Z","1.0.0-beta.2":"2019-09-01T08:23:34.096Z","1.0.0":"2019-09-14T09:18:33.187Z","1.0.1":"2019-09-29T15:02:09.452Z","1.0.2":"2019-10-21T05:41:20.468Z","1.0.3":"2019-10-24T14:35:07.995Z","1.0.4":"2019-11-02T15:40:11.802Z","1.0.5":"2019-12-08T07:55:08.070Z","1.0.6":"2019-12-15T09:15:44.377Z","1.0.7":"2019-12-22T15:46:48.534Z","1.0.8":"2020-01-19T14:25:28.830Z","1.1.0-beta.0":"2020-04-26T15:24:27.929Z","1.1.0-beta.1":"2020-05-04T15:18:00.143Z","1.1.0-beta.2":"2020-05-11T15:53:18.959Z","1.1.0":"2020-05-17T16:22:16.151Z","1.1.1":"2020-05-24T16:19:02.861Z","1.1.2":"2020-05-31T15:43:04.195Z","1.1.3":"2020-06-14T15:10:26.689Z","1.1.4":"2020-08-16T12:16:46.671Z","1.1.5":"2020-09-20T15:07:01.243Z","1.1.6":"2021-01-17T16:21:36.450Z"},"homepage":"https://github.com/phoenixwong/vue2-timepicker#readme","keywords":["vue","vue2","time","picker","dropdown","input","UI"],"repository":{"type":"git","url":"git+https://github.com/phoenixwong/vue2-timepicker.git"},"author":{"name":"Phoenix Wong","email":"phoenixyfwong@gmail.com"},"bugs":{"url":"https://github.com/phoenixwong/vue2-timepicker/issues"},"license":"MIT","readmeFilename":"README.md"}