├── .gitignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── MIGRATION.md
├── README.md
├── babel.config.js
├── demo
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   ├── _variables.styl
    │   │   └── demo.styl
    │   ├── components
    │   │   ├── ConfigRow.vue
    │   │   ├── OverlayPanel.vue
    │   │   ├── Playground.vue
    │   │   ├── SampleBlock.vue
    │   │   └── Samples.vue
    │   └── main.js
    └── vue.config.js
├── dist
    ├── VueTimepicker.common.js
    ├── VueTimepicker.common.js.map
    ├── VueTimepicker.css
    ├── VueTimepicker.umd.js
    ├── VueTimepicker.umd.js.map
    ├── VueTimepicker.umd.min.js
    ├── VueTimepicker.umd.min.js.map
    └── demo.html
├── package.json
└── src
    ├── index.js
    └── vue-timepicker.vue


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Compiled source #
 2 | ###################
 3 | *.com
 4 | *.class
 5 | *.dll
 6 | *.exe
 7 | *.o
 8 | *.so
 9 | 
10 | # Packages #
11 | ############
12 | *.7z
13 | *.dmg
14 | *.gz
15 | *.iso
16 | *.jar
17 | *.rar
18 | *.tar
19 | *.zip
20 | 
21 | # Cache and logs #
22 | ##################
23 | Application/Runtime/Cache/
24 | Application/Runtime/Logs/
25 | Application/Runtime/Temp/
26 | *.log
27 | 
28 | # OS generated files #
29 | ######################
30 | .DS_Store
31 | .DS_Store?
32 | ._*
33 | .Spotlight-V100
34 | .Trashes
35 | ehthumbs.db
36 | Thumbs.db
37 | ~$*
38 | .editorconfig
39 | 
40 | # NodeJS Packages #
41 | ###################
42 | node_modules
43 | yarn.lock*
44 | package.lock*
45 | 
46 | # Bower Packages #
47 | ###################
48 | bower
49 | bower_components
50 | 
51 | # Test and Logs #
52 | #################
53 | npm-debug.log
54 | yarn-debug.log*
55 | yarn-error.log*
56 | selenium-debug.log
57 | test/unit/coverage
58 | test/e2e/reports
59 | 
60 | # local env files #
61 | ###################
62 | .env.local
63 | .env.*.local
64 | 
65 | # Editor directories and files #
66 | ################################
67 | .idea
68 | .vscode
69 | *.suo
70 | *.ntvs*
71 | *.njsproj
72 | *.sln
73 | *.sw?
74 | 
75 | # Others  #
76 | ###########
77 | gh-pages
78 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # CHANGELOG
  2 | 
  3 | > The Change Log of Vue2 Timepicker `vue2-timepicker`
  4 | 
  5 | ## v 1.1.6
  6 | 
  7 | ### New
  8 | 
  9 | - Support appending the dropdown menu to the document body with `append-to-body`
 10 | 
 11 | ### Improvements
 12 | 
 13 | - In Manual Input mode, support jumping to the next token slot with a colon (`:`) or space (` `) key.
 14 | - Return full data on `blur` and `close` events as per the `change` event.
 15 | 
 16 | ## v 1.1.5
 17 | 
 18 | ### New
 19 | 
 20 | - Support changing dropdown direction with the `drop-direction` property. It accepts three string values: `"up"`, `"auto"` and `"down"` _(default)_.
 21 | - Additional `container-id` and `drop-offset-height` as helpers for the **"auto"** drop direction. Please check the documentation for more info.
 22 | 
 23 | ## v 1.1.4
 24 | 
 25 | ### New
 26 | 
 27 | - Support customized clear button and dropdown button with the `clearButton` and `dropdownButton` **v-slot** (Thanks to @jost-s).
 28 | - Added new `icon` **v-slot** for displaying an extra input icon.
 29 | - Added new `fixed-dropdown-button` property, to make the dropdown button always visible.
 30 | 
 31 | ## v 1.1.3
 32 | 
 33 | ### Improvements
 34 | 
 35 | - Enhanced `hide-dropdown` feature -- When the dropdown is hidden by default, users can choose to open the dropdown by clicking the triangle button "▾" (Thanks to @jost-s).
 36 | - Refined `focus` and `blur` event.
 37 | - Minor fixes for the Advanced Keyboard mode.
 38 | 
 39 | ## v 1.1.2
 40 | 
 41 | ### New
 42 | 
 43 | More powerful `format` string parameter. E.g., you can hide the "hour" column by setting `format="mm:ss"`, or make AM/PM the first column by `format="A hh:ss"`, no extra CSS hacking needed. Please check the Demo page for more examples.
 44 | 
 45 | ### Improvements
 46 | 
 47 | - Support `shift+tab` to navigate to the previous token slot in the Manual Input mode (Thanks to @jost-s).
 48 | - Other minor keyboard navigation enhancements for Manual Input mode
 49 | 
 50 | ## v 1.1.1
 51 | 
 52 | ### Improvements
 53 | 
 54 | Instant feedback after manual input. Plus, add a new `manual-input-timeout` property to help set up the timeout for continuous input (Thanks to @jost-s).
 55 | 
 56 | #### Notes for Contributors
 57 | 
 58 | We've upgraded to use vue-cli **v4** in this version. Please check the CONTRIBUTING.md for more info.
 59 | 
 60 | 
 61 | ## v 1.1.0
 62 | 
 63 | ### New
 64 | 
 65 | - Support manually input values with the `manual-input` toggle.
 66 | - Enable to hide the dropdown menu with `hide-dropdown` in Manual Input (`manual-input`) mode.
 67 | - Added conditional helper classes `is-empty`, `invalid` and `all-selected` to the `<input>` element.
 68 | - Change the `<input>` border to red color when user input is invalid. E.g., when it contains a disabled hour value. You can mute this auto-styling by adding `"skip-error-style"` to `input-class`.
 69 | - Add support to the `autocomplete` attribute.
 70 | - Emit `error` event when the input value becomes invalid.
 71 | - Emit `focus` and `blur` events to help to identify the focus/blur state. Useful when the dropdown is force hidden by `hide-dropdown`.
 72 | 
 73 | ### Improvements
 74 | 
 75 | Enable seamless loop from the start or end of a column in `advanced-keyboard` mode.
 76 | 
 77 | ## v 1.0.8
 78 | 
 79 | ### Improvements
 80 | 
 81 | Keep the dropdown menu open when mouse drag on the hour/minute/second list's scrollbar handler.
 82 | 
 83 | ## v 1.0.7
 84 | 
 85 | ### Fixes
 86 | 
 87 | Fixes `placeholder` not dynamically updated issue in some cases (Thanks to @ObsidianTech).
 88 | 
 89 | ### Improvements
 90 | 
 91 | Vertical alignment refined for the clear button across different browsers.
 92 | 
 93 | ## v 1.0.6
 94 | 
 95 | ### New
 96 | 
 97 | Added `auto-scroll` feature.
 98 | 
 99 | ### Improvements
100 | 
101 | On Advanced Keyboard mode, auto-focus on the selected value (if any) in priority.
102 | 
103 | ## v 1.0.5
104 | 
105 | ### Fixes
106 | 
107 | Fixes the Advanced Keyboard tab navigating feature on Firefox
108 | 
109 | ## v 1.0.4
110 | 
111 | ### Improvements
112 | 
113 | - Adjust the default value of `blur-delay` to 300ms. (Thanks to @rjurado01).
114 | - Added _Array_ and _Object_ types support to `input-class`.
115 | 
116 | ## v 1.0.3
117 | 
118 | ### New
119 | 
120 | Added `lazy` event mode. (Thanks to @VictorCazanave)
121 | 
122 | ## v 1.0.2
123 | 
124 | ### New
125 | 
126 | - Support customized labels for the hour, minute, second, and APM pickers (Thanks to @maritaria).
127 | - Support setting customized text to replace the `am`/`pm` (`AM`/`PM`) string in the UI.
128 | - Added `input-width` property to help to adjust Timepicker's width with ease.
129 | 
130 | ### Improvements
131 | 
132 | Added more guiding notes for SSR usage. (Thanks to @oj-recit)
133 | 
134 | ## v 1.0.1
135 | 
136 | ### Fixes
137 | 
138 | Fixes the _String_ form `v-model` support on Edge and Safari
139 | 
140 | ## v 1.0.0
141 | 
142 | ### Breaking Changes
143 | 
144 | **⚠️ IMPORTANT:** The default **import** source in `v1.0.0+` is different from the `v0.x` versions.
145 | 
146 | From `v1.0.0+`, CSS is excluded from the main source. Please import the CSS file separately.
147 | 
148 | ```javascript
149 | // v1.0.0+
150 | //
151 | import VueTimepicker from 'vue2-timepicker'
152 | // -> Imports JS file in UMD form
153 | 
154 | // CSS
155 | import 'vue2-timepicker/dist/VueTimepicker.css'
156 | ```
157 | 
158 | Comparing to:
159 | 
160 | ```javascript
161 | // While in the v0.x versions
162 | import VueTimepicker from 'vue2-timepicker'
163 | // -> Imports the *.vue Single File Component together with CSS
164 | ```
165 | 
166 | Please check the [Documentation](https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md#get-started) for more available import formats.
167 | 
168 | ### New
169 | 
170 | - Support using _String_ value in `v-model`.
171 | - New `minute-range` and `second-range` support. Companioned with `hide-disabled-minutes` and `hide-disabled-seconds`.
172 | - New `hide-disabled-items` property for hiding **all** excluded items (hour, minute and seconds) at a time.
173 | - New `close-on-complete` for automatically close the dropdown when the user finishes selecting **all** of the required fields.
174 | - Added `advanced-keyboard` support for Arrow Keys navigation and Space/Enter key selection.
175 | - New `tabindex` property support, which will be assigned to the `<input type="text">` within the component.
176 | - Added `debug-mode` to help developers investigating the input -> output process.
177 | 
178 | ### Fixes
179 | 
180 | Added ES "module" and other version fields in _package.json_ to resolving more loader issues. (Thanks to @Trainmaster)
181 | 
182 | ### Improvements
183 | 
184 | When `hour-range` is set in a 12-hour format Timepicker, recheck the selected hour's validity after user switching "AM/PM" from the dropdown.
185 | 
186 | ## v 0.2.2
187 | 
188 | ### Fixes
189 | 
190 | Fixes `v-model` watcher for cases like changing the input value programmatically (non-user behavior).
191 | 
192 | ### Improvements
193 | 
194 | Added `displayTime` in the return data of `change` event.
195 | 
196 | ## v 0.2.1
197 | 
198 | ### New
199 | 
200 | - New `input-class` support. The custom input class will be assigned to the `<input type="text">` within the component. (Thanks to @marufmax)
201 | - Add support to `placeholder`, just like other regular form elements
202 | 
203 | ### Improvements
204 | 
205 | Refined `@click.stop` logic
206 | 
207 | ### Fixes
208 | 
209 | Fixes possible loader issue in some Webpack configs (Thanks to @RaphaelJ)
210 | 
211 | ## v 0.2.0
212 | 
213 | ### Breaking Changes
214 | 
215 | - Upgraded to support more current **vue** (2.6.10) and **vue-cli** (3.9.0) with Webpack 4.
216 | 
217 | ### New
218 | 
219 | - New `hour-range` support. Added capability to show which hours are available and disabled the rest.
220 | - New `hide-disabled-hours`. The best companion of `hour-range`, for you to hide unwanted hours in the hour picker.
221 | - New `disabled` parameter. To disable dropdown picker and clear button in the UI.
222 | - Emit `open` and `close` events to help tracking the dropdown toggle status. (Thanks to @tprashan)
223 | 
224 | ### Improvements
225 | 
226 | - Put `12` before `1` in the hour select for 12-hour format (`hh` and `h`). It will be more natural, especially when paired with `hour-range`.
227 | - Support `name` parameter as regular form inputs. (Thanks to @dilipgurung)
228 | 
229 | ## v 0.1.4
230 | 
231 | ### Fixes
232 | 
233 | Added stop propagation `.stop` to click events
234 | 
235 | ## v 0.1.3
236 | 
237 | ### Improvements
238 | 
239 | Add support to `<label for="...">` (Thanks to @Reached)
240 | 
241 | ```html
242 | <!-- Sample -->
243 | <label for="yourID">Your Label Text</label>
244 | <vue-timepicker id="yourID"></vue-timepicker>
245 | ```
246 | 
247 | ## v 0.1.2
248 | 
249 | Release the `dist` files
250 | 
251 | ## v 0.1.1
252 | 
253 | The first notable release of Vue2 Timepicker
254 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contribution
 2 | 
 3 | Please feel free to fork and help developing.
 4 | 
 5 | ```bash
 6 | # Install dependencies
 7 | yarn install
 8 | 
 9 | # Init development dependencies
10 | yarn dev:init
11 | 
12 | # Start developing. Serve with hot reload at localhost:8080
13 | yarn dev
14 | ```
15 | 
16 | For detailed explanation on how things work, checkout the [Vue Cli Guide](https://cli.vuejs.org/guide/).
17 | 
18 | **BREAKING CHANGES**
19 | 
20 | - Start from `^0.2.0`, we develop Demo pages with [**Yarn**](
21 | https://yarnpkg.com/), [**Pug**](https://pugjs.org/), and [**Stylus**](http://stylus-lang.com/)
22 | - Upgraded to **@vue/cli v4** from `^1.1.1`.
23 | 
24 | **NOTE**
25 | 
26 | If you have trouble running `yarn dev` after the _^1.1.1_ upgrade, please try the following process:
27 | 
28 | 1. Remove the existing `node_modules` folder and the `yarn.lock` in this repository's **root** directory.
29 | 2. Next, remove the `node_modules` folder and the `yarn.lock` in the **/demo** directory as well.
30 | 3. Go back to the repository's root, run `yarn install`, and `yarn dev:init` again.
31 | 
32 | ---
33 | 
34 | ### Watchdogs
35 | 
36 | ![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/phoenixwong/vue2-timepicker?style=flat-square)
37 | ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/phoenixwong/vue2-timepicker?style=flat-square)
38 | ![GitHub Release Date](https://img.shields.io/github/release-date/phoenixwong/vue2-timepicker?style=flat-square)
39 | ![npm](https://img.shields.io/npm/dw/vue2-timepicker?style=flat-square)
40 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Phoenix Wong
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/MIGRATION.md:
--------------------------------------------------------------------------------
  1 | # Table of Contents
  2 | 
  3 | - [Migrating from Vue 1.x vue-timepicker](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md#migrating-from-vue-1x-vue-timepicker)
  4 | - [Migrating from Bower to Yarn or NPM](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md#migrating-from-bower-to-yarn-or-npm)
  5 | 
  6 | # Migrating from Vue 1.x vue-timepicker
  7 | 
  8 | There are bunch of [notable changes in Vue2](http://vuejs.org/guide/migration.html), and quite some of the key features our original `vue-timepicker` has been relying on, got deprecated since 2.0. So here we are, a brand new version compatible with Vue 2.x.
  9 | 
 10 | ## Crucial changes
 11 | 
 12 | ### Use `v-model` Instead of `:time-value.sync`
 13 | 
 14 | The `.sync` modifier on `v-bind` has been deprecated ([source](http://vuejs.org/guide/migration.html#once-and-sync-Modifiers-on-v-bind-removed)), hence the original `:time-value.sync` binding is not going to work anymore.
 15 | 
 16 | However, thanks to the awesome Vue2.0 feature, which now has great support for `v-model` on custom components, you can simply replace those sync properties with `v-model`.
 17 | 
 18 | ```html
 19 | <!-- Vue 1.x -->
 20 | <vue-timepicker :time-value.sync="yourTimeValue"></vue-timepicker>
 21 | 
 22 | <!-- Vue 2.x version -->
 23 | <vue-timepicker v-model="yourTimeValue"></vue-timepicker>
 24 | ```
 25 | 
 26 | ### No More `vue-timepicker-update` Event
 27 | 
 28 | The `$dispatch` event `vue-timepicker-update` been depending on, together with the `events` option, got removed in Vue2 either ([source 1](http://vuejs.org/guide/migration.html#dispatch-and-broadcast-replaced), [source 2](http://vuejs.org/guide/migration.html#events-option-removed)). Please switch to `@change` event handler instead -- check the [Documentation](https://github.com/phoenixwong/vue2-timepicker#method-2-add-change-event-handler) for detail example.
 29 | 
 30 | ## Minor Changes
 31 | 
 32 | ### Replace `$arguments` with `$event` in the `change` event handler
 33 | 
 34 | If you're using `change` event handler **with** custom arguments, please replace the old `$arguments` parameter with `$event`
 35 | 
 36 | ```html
 37 | <!-- Vue 1.x -->
 38 | <vue-timepicker :time-value.sync="yourTimeValue" @change="changeHandler($arguments, 'foo', 'bar')"></vue-timepicker>
 39 | 
 40 | <!-- Vue 2.x version -->
 41 | <vue-timepicker :time-value.sync="yourTimeValue" @change="changeHandler($event, 'foo', 'bar')"></vue-timepicker>
 42 | ```
 43 | 
 44 | Whereas the `change` event handler *without* custom arguments is intact.
 45 | 
 46 | ### Get Rid of the Array Wrapper `[]` in `change` Event Data
 47 | 
 48 | In the example above, when reading event data from the `changeHandler` in 1.x, the data structure will be --
 49 | 
 50 | ```javascript
 51 | // Vue 1.x
 52 | [
 53 |   {
 54 |     data: {
 55 |       HH:...,
 56 |       mm:...,
 57 |       ...
 58 |     }
 59 |   }
 60 | ]
 61 | ```
 62 | 
 63 | In the 2.x version, we can say goodbye to the `[]` wrapper --
 64 | 
 65 | ```javascript
 66 | // Vue 2.x version
 67 | {
 68 |   data: {
 69 |     HH:...,
 70 |     mm:...,
 71 |     ...
 72 |   }
 73 | }
 74 | ```
 75 | 
 76 | ### The `change` event now returns full values
 77 | 
 78 | In the Vue 1.x version, if you have `time-value` in sync, `change` event will only return values from your predefined tokens. Whereas the new 2.x version will always return a full value package containing all supported tokens.
 79 | 
 80 | For example, if you have a binding value defined in the form of "HH:mm:ss"
 81 | 
 82 | ```javascript
 83 | // predefined data sample
 84 | data: function () {
 85 |   return {
 86 |     yourTimeValue: {
 87 |       HH: "10",
 88 |       mm: "05",
 89 |       ss: "00"
 90 |     },
 91 |     ...
 92 |   }
 93 | }
 94 | ```
 95 | 
 96 | When the picker is set to "14:30:15" later --
 97 | 
 98 | ```javascript
 99 | // Vue 1.x
100 | // - only returns predefined tokens ('HH', 'mm' and 'ss')
101 | {
102 |   HH: "14",
103 |   mm: "30",
104 |   ss: "15"
105 | }
106 | 
107 | // Vue 2.x version
108 | // - returns All supported tokens
109 | {
110 |   HH: "14",
111 |   H: "14",
112 |   hh: "14",
113 |   a: "am",
114 |   A: "AM",
115 |   h: "14",
116 |   kk: "14",
117 |   k: "14",
118 |   m: "30",
119 |   mm: "30",
120 |   s: "15",
121 |   ss: "15"
122 | }
123 | ```
124 | 
125 | ## Miscellaneous
126 | 
127 | There will be **no** standalone ES5 script in the 2.x version.
128 | 
129 | ---
130 | 
131 | # Migrating from Bower to Yarn or NPM
132 | 
133 | Because [Bower](https://bower.io/) itself stopped maintaining since 2017, VueTimepicker drops support for Bower from version `0.2.0+`.
134 | 
135 | Please check Bower's official guidelines for [How to migrate away from Bower?](https://bower.io/blog/2017/how-to-migrate-away-from-bower/)
136 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
   1 | # Vue2 Timepicker  
   2 | 
   3 | ![GitHub version](https://img.shields.io/github/package-json/v/phoenixwong/vue2-timepicker?color=success&style=flat-square)
   4 | ![npm version](https://img.shields.io/npm/v/vue2-timepicker?style=flat-square)
   5 | ![GitHub release](https://img.shields.io/github/release/phoenixwong/vue2-timepicker?label=github&style=flat-square)
   6 | ![npm downloads](https://img.shields.io/npm/dm/vue2-timepicker?style=flat-square)
   7 | 
   8 | ---
   9 | 
  10 | 💡 Dead repo recharged 🔋
  11 | 
  12 | ---
  13 | 
  14 | A dropdown time picker (hour|minute|second) for **Vue 2.x**, with flexible time format support.
  15 | 
  16 | ## Demo
  17 | 
  18 | You can see the **Vue2 Timepicker** in action in the [Demo Page](https://phoenixwong.github.io/vue2-timepicker/)
  19 | 
  20 | ## Migration
  21 | 
  22 | Please check [MIGRATION.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md) for basic guidelines if you are about to:
  23 | 
  24 | - Migrate from the Vue 1.x version **[vue-time-picker](https://github.com/phoenixwong/vue-timepicker)**
  25 | - Migrate from Bower to Yarn or NPM (Vue2 Timepicker `v0.1.x` -> `v0.2.0+`)
  26 | 
  27 | 
  28 | ## Dependencies
  29 | 
  30 | [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)
  31 | 
  32 | ## Installation
  33 | 
  34 | ```bash
  35 | yarn add vue2-timepicker
  36 | ```
  37 | 
  38 | ```bash
  39 | npm install vue2-timepicker --save
  40 | ```
  41 | 
  42 | > 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.
  43 | 
  44 | ## Get Started
  45 | 
  46 | ### **Step 1:** Import VueTimepicker
  47 | 
  48 | #### **Option A:** Import component JS and CSS
  49 | 
  50 | ```javascript
  51 | // Main JS (in UMD format)
  52 | import VueTimepicker from 'vue2-timepicker'
  53 | 
  54 | // CSS
  55 | import 'vue2-timepicker/dist/VueTimepicker.css'
  56 | ```
  57 | 
  58 | #### **Option B:** Choose any bundle version base on your needs
  59 | 
  60 | **Javascript**
  61 | 
  62 | ```javascript
  63 | // CommonJS
  64 | import VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'
  65 | // UMD
  66 | import VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'
  67 | // UMD Minified
  68 | import VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'
  69 | ```
  70 | 
  71 | **CSS**
  72 | 
  73 | ```css
  74 | @import 'vue2-timepicker/dist/VueTimepicker.css';
  75 | 
  76 | /* Or, with node_module alias path like: */
  77 | @import '~vue2-timepicker/dist/VueTimepicker.css';
  78 | 
  79 | /*
  80 |   NOTE: the path alias to `node_modules` differs between bundlers.
  81 |   Please change the `~` to any alias that works with your environment.
  82 |  */
  83 | ```
  84 | 
  85 | **Single File Component**
  86 | 
  87 | ```javascript
  88 | // The *.vue file with CSS included
  89 | import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'
  90 | // NOTE: In some cases, it requires additional workarounds in the bundler's config
  91 | ```
  92 | 
  93 | #### **SSR Usage**
  94 | 
  95 | ```javascript
  96 | // Import the *.vue file (CSS included)
  97 | import VueTimepicker from 'vue2-timepicker/sfc'
  98 | // Note the `/sfc` suffix here
  99 | ```
 100 | 
 101 | If your server-side renderer cannot recognize the `/sfc` alias, please try --
 102 | 
 103 | ```javascript
 104 | // Manually point to the `/src` folder
 105 | import VueTimepicker from 'vue2-timepicker/src'
 106 | // Or, to the specific file name
 107 | import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'
 108 | ```
 109 | 
 110 | ### **Step 2**: Include VueTimepicker in your component
 111 | 
 112 | ```javascript
 113 | var yourComponent = new Vue({
 114 |   components: { VueTimepicker },
 115 |   ...
 116 | })
 117 | ```
 118 | 
 119 | ### **Step 3**: Put `vue-timepicker` in your component's template
 120 | 
 121 | Then, you can introduce the `vue-timepicker` tag anywhere you like in your component's template
 122 | 
 123 | ```html
 124 | <vue-timepicker></vue-timepicker>
 125 | ```
 126 | 
 127 | 
 128 | ## Basic Usage
 129 | 
 130 | ### Base
 131 | 
 132 | ```html
 133 | <!-- Default to 24-Hour format HH:mm -->
 134 | <vue-timepicker></vue-timepicker>
 135 | ```
 136 | 
 137 | ### Customized Time Format
 138 | 
 139 | ```html
 140 | <!-- Show seconds picker -->
 141 | <vue-timepicker format="HH:mm:ss"></vue-timepicker>
 142 | 
 143 | <!-- 12-hour format, with AM/PM picker -->
 144 | <vue-timepicker format="hh:mm A"></vue-timepicker>
 145 | 
 146 | <!-- 12-hour format, with seconds picker and am/pm picker -->
 147 | <vue-timepicker format="hh:mm:ss a"></vue-timepicker>
 148 | ```
 149 | 
 150 | VueTimepicker recognizes the following tokens in the format string
 151 | 
 152 | Section    | Token | Output
 153 | ---------- | ----- | ---------------
 154 | **AM/PM**  | A     | AM PM
 155 | &nbsp;     | a     | am pm
 156 | **Hour**   | H     | 0 1 ... 22 23
 157 | &nbsp;     | HH    | 00 01 ... 22 23
 158 | &nbsp;     | h     | 1 2 ... 11 12
 159 | &nbsp;     | hh    | 01 02 ... 11 12
 160 | &nbsp;     | k     | 1 2 ... 23 24
 161 | &nbsp;     | kk    | 01 02 ... 23 24
 162 | **Minute** | m     | 0 1 ... 58 59
 163 | &nbsp;     | mm    | 00 01 ... 58 59
 164 | **Second** | s     | 0 1 ... 58 59
 165 | &nbsp;     | ss    | 00 01 ... 58 59
 166 | 
 167 | > If not set, the `format` string is default to "HH:mm"
 168 | 
 169 | ### Customized Picker Interval
 170 | 
 171 | ```html
 172 | <!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->
 173 | <vue-timepicker :minute-interval="5"></vue-timepicker>
 174 | 
 175 | <!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->
 176 | <vue-timepicker :second-interval="10"></vue-timepicker>
 177 | 
 178 | <!-- Bind interval config with your own data variable -->
 179 | <vue-timepicker :minute-interval="yourMinuteInterval"></vue-timepicker>
 180 | ```
 181 | 
 182 | 
 183 | ## Data Binding
 184 | 
 185 | ### Bind Value with `v-model`
 186 | 
 187 | From `v1.0.0+`, timepicker's `v-model` accepts value in both _Object_ (default) and _String_ format. The `v0.x` versions only support _Object_ form.
 188 | 
 189 | #### Set Initial Value
 190 | 
 191 | For example, if you want to set "10:05:00" ("HH:mm:ss" format) as the initial value of vue-timepicker:
 192 | 
 193 | ```javascript
 194 | const yourComponent = new Vue({
 195 |   components: { VueTimepicker },
 196 |   data () {
 197 |     return {
 198 |       // Object form
 199 |       yourTimeValue: {
 200 |         HH: '10',
 201 |         mm: '05',
 202 |         ss: '00'
 203 |       },
 204 |       // String form
 205 |       yourStringTimeValue: '10:05:00',
 206 |       ...
 207 |     }
 208 |   },
 209 |   ...
 210 | })
 211 | ```
 212 | 
 213 | Both forms lead to the same result.
 214 | 
 215 | ```html
 216 | <!-- Object form -->
 217 | <vue-timepicker v-model="yourTimeValue" format="HH:mm:ss"></vue-timepicker>
 218 | 
 219 | <!-- String form -->
 220 | <vue-timepicker v-model="yourStringTimeValue" format="HH:mm:ss"></vue-timepicker>
 221 | ```
 222 | 
 223 | #### Set Empty Initial Value
 224 | 
 225 | When the initial value is completely unknown:
 226 | 
 227 | ```javascript
 228 | data () {
 229 |   return {
 230 |     // Will be rendered as Object form
 231 |     yourEmptyValue: {},
 232 |     emptyValueToo: undefined,
 233 |     emptyValueAsWell: null,
 234 | 
 235 |     // Will be taken into String form
 236 |     yourEmptyStringValue: ''
 237 |   }
 238 | }
 239 | ```
 240 | 
 241 | #### Set Partially-Known Initial Value
 242 | 
 243 | For instance, if you want to set the initial hour value to **8 pm** and leave the rest slots empty:
 244 | 
 245 | ```javascript
 246 | data () {
 247 |   return {
 248 |     // OBJECT FORM
 249 |     // Default 24-Hour
 250 |     timeValue: {
 251 |       HH: '20',
 252 |       mm: ''
 253 |     },
 254 |     // 12-Hour with seconds
 255 |     timeValueWithSec: {
 256 |       h: '8',
 257 |       mm: '',
 258 |       ss: '',
 259 |       A: 'PM'
 260 |     },
 261 | 
 262 |     // STRING FORM
 263 |     // Default 24-Hour + String value
 264 |     stringTimeValue: '20:mm',
 265 |     // 12-Hour with seconds + String value
 266 |     stringTimeValueWithSec: '8:mm:ss PM'
 267 |   }
 268 | }
 269 | ```
 270 | 
 271 | ```html
 272 | <!-- OBJECT FORM -->
 273 | <!-- Default 24-Hour -->
 274 | <vue-timepicker v-model="timeValue"></vue-timepicker>
 275 | <!-- 12-Hour with seconds -->
 276 | <vue-timepicker v-model="timeValueWithSec" format="h:mm:ss A"></vue-timepicker>
 277 | 
 278 | <!-- STRING FORM -->
 279 | <!-- Default 24-Hour + String value -->
 280 | <vue-timepicker v-model="stringTimeValue"></vue-timepicker>
 281 | <!-- 12-Hour with seconds + String value -->
 282 | <vue-timepicker v-model="stringTimeValueWithSec" format="h:mm:ss A"></vue-timepicker>
 283 | ```
 284 | 
 285 | ### Get Time Picker's Current Value
 286 | 
 287 | #### Get value from `v-model`
 288 | 
 289 | You can either read the binding `v-model` value anytime or add a handler to deal with the `input` event from vue-timepicker.
 290 | 
 291 | ```html
 292 | <vue-timepicker v-model="yourTimeValue" format="HH:mm:ss" @input="inputHandler"></vue-timepicker>
 293 | ```
 294 | 
 295 | ```javascript
 296 | {
 297 |   data () {
 298 |     return {
 299 |       yourTimeValue: {
 300 |         HH: '10',
 301 |         mm: '05',
 302 |         ss: '00'
 303 |       },
 304 |       ...
 305 |     }
 306 |   },
 307 | 
 308 |   methods: {
 309 |     inputHandler (eventData) {
 310 |       console.log(eventData)
 311 |     }
 312 |   }
 313 | }
 314 | 
 315 | ```
 316 | 
 317 | In this case, we set the initial value (_yourTimeValue_) to "10:05:00". Then, open the dropdown picker and pick a new time, like setting it to "14:30:15" for example.
 318 | 
 319 | ```javascript
 320 | // In `inputHandler`:
 321 | // console.log outputs -> {HH: "14", mm: "30", ss: "15"}
 322 | ```
 323 | 
 324 | ### Read Data From `change` Event
 325 | 
 326 | ```html
 327 | <!-- A: No argument -->
 328 | <vue-timepicker v-model="yourTimeValue" @change="changeHandler"></vue-timepicker>
 329 | 
 330 | <!-- B: Custom arguments -->
 331 | <vue-timepicker v-model="yourTimeValue" @change="otherChangeHandler($event, 'foo', 42)"></vue-timepicker>
 332 | ```
 333 | 
 334 | ```javascript
 335 | // A: No argument
 336 | changeHandler (eventData) {
 337 |   console.log(eventData)
 338 |   // -> {data: {HH:..., mm:... }, displayTime: "HH:mm"}
 339 | }
 340 | 
 341 | // B: Custom arguments
 342 | otherChangeHandler (eventData, yourArg1, yourArg2) {
 343 |   console.log(eventData)
 344 |   // -> {data: {HH:..., mm:... }, displayTime: "HH:mm"}
 345 |   console.log(yourArg1)
 346 |   // -> 'foo'
 347 |   console.log(yourArg2)
 348 |   // -> 42
 349 | }
 350 | ```
 351 | 
 352 | Unlike `v-model` and `input` event, which only return the defined time tokens you provided in the binding variable, the `change` event delivers **all** supported formats.
 353 | 
 354 | In the example above, after the user set values to "14:30:15" in the picker, `change` event returns the following data:
 355 | 
 356 | ```javascript
 357 | // `@change` event data
 358 | {
 359 |   data: {
 360 |     HH: "14",
 361 |     H: "14",
 362 |     hh: "14",
 363 |     a: "am",
 364 |     A: "AM",
 365 |     h: "14",
 366 |     kk: "14",
 367 |     k: "14",
 368 |     m: "30",
 369 |     mm: "30",
 370 |     s: "15",
 371 |     ss: "15"
 372 |   },
 373 |   // extra `displayTime` added since v0.2.2
 374 |   displayTime: "14:30:15"
 375 | }
 376 | ```
 377 | 
 378 | Whereas the `v-model` / `input` only return the data with defined tokens
 379 | 
 380 | ```javascript
 381 | // Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}
 382 | // Hence, the `v-model` returns:
 383 | {
 384 |   HH: "14",
 385 |   mm: "30",
 386 |   ss: "15"
 387 | }
 388 | ```
 389 | 
 390 | ## Advance Usage
 391 | 
 392 | ### Hide Clear Button
 393 | 
 394 | ```html
 395 | <vue-timepicker hide-clear-button></vue-timepicker>
 396 | ```
 397 | 
 398 | Enable 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.
 399 | 
 400 | ### Disable Picker
 401 | 
 402 | ```html
 403 | <vue-timepicker disabled></vue-timepicker>
 404 | ```
 405 | 
 406 | Fully disable both dropdown picker and the "&times;" clear button in the UI, to prevent users from changing any values again.
 407 | 
 408 | ### Close on Complete
 409 | 
 410 | Automatically close the dropdown when the user finishes selecting **all** of the required fields.
 411 | 
 412 | ```html
 413 | <vue-timepicker close-on-complete></vue-timepicker>
 414 | ```
 415 | 
 416 | ### Auto-Scroll
 417 | 
 418 | ```html
 419 | <vue-timepicker auto-scroll></vue-timepicker>
 420 | ```
 421 | 
 422 | Auto-scroll to selected values on dropdown open. It works with both:
 423 | 
 424 | - Programmatically defined value. E.g., the initial value from `v-model`
 425 | - Values manually picked by the user.
 426 | 
 427 | ### Define Hour Range
 428 | 
 429 | Sometimes you may want to limit hours picker to a specific range. The `hour-range` parameter is here to help.
 430 | 
 431 | ```html
 432 | <!-- 24-Hour Format -->
 433 | <vue-timepicker :hour-range="[5, [8, 12], [14, 17], 19]"></vue-timepicker>
 434 | <!-- >> Equals to :hour-range="[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]" -->
 435 | 
 436 | <!-- 12-Hour Format -->
 437 | <vue-timepicker :hour-range="['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']" format="hh:mm a">
 438 | <!-- >> Equals to :hour-range="['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']" -->
 439 | ```
 440 | 
 441 | ### Set Minute and Second Range
 442 | 
 443 | Similar to `hour-range`, you can determine values in the minutes and seconds dropdown by using `minute-range` and `second-range`.
 444 | 
 445 | ```html
 446 | <!-- Minute range -->
 447 | <vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]"></vue-timepicker>
 448 | <!-- >> Active Items: 00, 06, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->
 449 | 
 450 | <!-- Second range -->
 451 | <vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]"></vue-timepicker>
 452 | <!-- >> Active Items: 0, 6, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->
 453 | ```
 454 | 
 455 | When implemented together with `minute-interval` and `second-interval`, the customized intervals take the priority.
 456 | 
 457 | ```html
 458 | <!-- Minute range + 5-minute interval -->
 459 | <vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]" :minute-interval="5"></vue-timepicker>
 460 | <!-- >> Active Items: 00, 10, 15, 20, 25, 30, 50 -->
 461 | 
 462 | <!-- Second range + 10-second interval-->
 463 | <vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]" :second-interval="10"></vue-timepicker>
 464 | <!-- >> Active Items: 0, 10, 20, 30, 50 -->
 465 | ```
 466 | 
 467 | ### Hide Disabled Items
 468 | 
 469 | There're four kinds of helper properties to let you hide the values excluded by `hour-range`, `minute-range`, and `second-range`.
 470 | 
 471 | - **hide-disabled-items**: Hide **all** disabled items - hour, minute, and seconds.
 472 | - **hide-disabled-hours**: Hide disabled **hour** values only.
 473 | - **hide-disabled-minutes**: Hide disabled **minute** values only.
 474 | - **hide-disabled-seconds**: Hide disabled **second** values only.
 475 | 
 476 | ```html
 477 | <!-- `hide-disabled-hours` sample -->
 478 | <vue-timepicker :hour-range="[5, [8, 12], [14, 17], 19]" hide-disabled-hours></vue-timepicker>
 479 | ```
 480 | 
 481 | Here we take the `hide-disabled-hours` as an example. It's a pair with the `hour-range` parameter. In this case, the hour picker hides the invalid hours (_0, 1, 2, 3, 4, 6, 7, 13, 18, 20, 21, 22, 23_) and display the valid hours (_5, 8, 9, ..._) only.
 482 | 
 483 | ### Advanced Keyboard Support
 484 | 
 485 | Basic keyboard support includes:
 486 | 
 487 | - **Tab**: Focus or blur the Timepicker
 488 | - **Esc**: Close the dropdown
 489 | 
 490 | Advance Keyboard support (enabled with `advanced-keyboard`):
 491 | 
 492 | - **Arrow Keys**: Navigate between valid (non-disabled) values and columns
 493 | - **Space** or **Enter**: Select the focusing item
 494 | 
 495 | ```html
 496 | <vue-timepicker advanced-keyboard></vue-timepicker>
 497 | ```
 498 | 
 499 | Please be aware that after putting the `advanced-keyboard` on, hundreds of additional keyboard event listeners are going to be attached to the component. The amount of listeners depends on how many hours, minutes, and seconds value you enabled in the current Timepicker.
 500 | 
 501 | ### Blur Delay
 502 | 
 503 | ```html
 504 | <!-- Unit: million second -->
 505 | <vue-timepicker :blur-delay="500"></vue-timepicker>
 506 | ```
 507 | 
 508 | Sets the blur delay time for the dropdown. Defaults to `300` if not set.
 509 | 
 510 | ### Manual Input Support
 511 | 
 512 | ```html
 513 | <vue-timepicker manual-input></vue-timepicker>
 514 | ```
 515 | Let users add or change values through the `<input>` box besides the dropdown picker.
 516 | 
 517 | ### Manual Input Timeout
 518 | 
 519 | ```html
 520 | <!-- Unit: million second -->
 521 | <vue-timepicker :manual-input-timeout="1500"></vue-timepicker>
 522 | ```
 523 | 
 524 | Works with **manual-input** mode. It sets the timeout for continuous input. Defaults to `1000` if not set.
 525 | 
 526 | **How It Works?**
 527 | 
 528 | For example, when a user focuses on the **hour** slot (`HH`) of a `"HH:mm"` formatted Timepicker (with the default value `1000`):
 529 | 
 530 | - **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.
 531 | - **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.
 532 | 
 533 | ### Hide Dropdown
 534 | 
 535 | > **NOTE:** To use this feature, you MUST ENABLE the `manual-input` mode _(v.1.1.0+)_ in the first place.
 536 | 
 537 | It makes the dropdown picker hidden by default.
 538 | 
 539 | ```html
 540 | <vue-timepicker manual-input hide-dropdown></vue-timepicker>
 541 | ```
 542 | 
 543 | Users can still choose to open the dropdown by clicking the triangle ("&dtrif;") button on the right. _(v.1.1.3+)_
 544 | 
 545 | ### Fixed Dropdown Button
 546 | 
 547 | ```html
 548 | <vue-timepicker fixed-dropdown-button></vue-timepicker>
 549 | ```
 550 | 
 551 | Make the dropdown button always visible in the UI. _(v.1.1.4+)_
 552 | 
 553 | ### Drop Direction
 554 | 
 555 | Change dropdown direction when needed _(v.1.1.5+)_. Accepting values:
 556 | 
 557 | - **down**: Default value.
 558 | - **up**: Force open the dropdown above the input.
 559 | - **auto**: Auto detects available height and opens the dropdown on top if there are not enough spaces below the input.
 560 | 
 561 | ```html
 562 | <!-- Force drop up -->
 563 | <vue-timepicker drop-direction="up"></vue-timepicker>
 564 | 
 565 | <!-- Auto drop direction  -->
 566 | <vue-timepicker drop-direction="auto"></vue-timepicker>
 567 | ```
 568 | 
 569 | #### Container ID
 570 | 
 571 | Works 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.
 572 | 
 573 | ```html
 574 | <!-- Parent Container ID: "auto-dropdown-containter" -->
 575 | <div id="auto-dropdown-containter">
 576 |   <!-- Defined Container -->
 577 |   <vue-timepicker drop-direction="auto" container-id="auto-dropdown-containter"></vue-timepicker>
 578 | 
 579 |   <!-- Default (document body) -->
 580 |   <vue-timepicker drop-direction="auto"></vue-timepicker>
 581 | </div>
 582 | ```
 583 | 
 584 | #### Drop Offset Height
 585 | 
 586 | Works with `drop-direction="auto"` either. Defaults to `160` (unit: _px_) if the value is not set.
 587 | 
 588 | ```html
 589 | <!--
 590 |   When the available bottom space is less than 200px,
 591 |   open the dropdown above the input.
 592 | -->
 593 | <vue-timepicker drop-direction="auto" :drop-offset-height="200"></vue-timepicker>
 594 | ```
 595 | 
 596 | ### Lazy Event Mode
 597 | 
 598 | ```html
 599 | <vue-timepicker lazy></vue-timepicker>
 600 | ```
 601 | 
 602 | When `lazy` event mode is toggled on, only an actual user behavior can trigger the `input` and `change` events. Which are:
 603 | 
 604 | - The user opened the dropdown and picked a new value
 605 | - The user clicked the ("&times;") clear button
 606 | - The user inputted a new value or clear the existing value in the Manual Input mode
 607 | 
 608 | In other words, on `lazy` mode, Timepicker won't emit `input` and `change` events on mounted, nor after the value got modified programmatically.
 609 | 
 610 | 
 611 | ### Append To Body
 612 | 
 613 | Append the dropdown menu to the end of the document `<body>`. Try this if you have `z-index` or `overflow` layout issue with the dropdown.
 614 | 
 615 | ```html
 616 | <vue-timepicker append-to-body></vue-timepicker>
 617 | ```
 618 | 
 619 | The 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 -- 
 620 | 
 621 | ```css
 622 | /* E.g. set the z-index to 5000 */
 623 | .vue__time-picker-dropdown {
 624 |   z-index: 5000;
 625 | }
 626 | ```
 627 | 
 628 | **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`.
 629 | 
 630 | For example, when you have a customized background color set for selected values:
 631 | 
 632 | ```css
 633 | /* Default override (not using "append-to-body") */
 634 | .vue__time-picker .dropdown ul li:not([disabled]).active {
 635 |   background: steelblue;
 636 | }
 637 | 
 638 | /* When using "append-to-body" */
 639 | .vue__time-picker-dropdown ul li:not([disabled]).active {
 640 |   background: steelblue;
 641 | }
 642 | ```
 643 | 
 644 | ### Enable Debug Mode
 645 | 
 646 | ```html
 647 | <vue-timepicker debug-mode></vue-timepicker>
 648 | ```
 649 | 
 650 | It's aimed to help developers to investigate the input -> output process. When debug mode is toggled **on**, you can see extra `DEBUG: ...` logs coming through the console window as you interact with the vue-timepicker.
 651 | 
 652 | Let's create a "bug" here as an example --
 653 | 
 654 | ```html
 655 | <!-- Manual Bug Sample: Define timepicker with format "h:mm:ss A" -->
 656 | <vue-timepicker v-model="yourStringValue" format="h:mm:ss A" debug-mode></vue-timepicker>
 657 | ```
 658 | 
 659 | ```javascript
 660 | {
 661 |   data () {
 662 |     return {
 663 |       // Manual Bug Sample:
 664 |       // Should be '3:mm:05 A' but oops.. the finger slipped
 665 |       yourStringValue: 'e:mm:05 A'
 666 |     }
 667 |   }
 668 | }
 669 | ```
 670 | 
 671 | Then, in the console window, you should see a debug log saying:
 672 | 
 673 | ```console
 674 | DEBUG: The input string in "v-model" does NOT match the "format" pattern
 675 | format: h:mm:ss A
 676 | v-model: e:mm:05 A
 677 | ```
 678 | 
 679 | ## Main Props API Overview
 680 | 
 681 | Prop                      | Type               | Required | Default Value
 682 | ------------------------- | ------------------ | -------- | -------------
 683 | **v-model**               | _Object_, _String_ | no       | _undefined_
 684 | **format**                | _String_           | no       | "HH:mm"
 685 | **minute-interval**       | _Number_           | no       | _undefined_
 686 | **second-interval**       | _Number_           | no       | _undefined_
 687 | **hide-clear-button**     | _Boolean_          | no       | false
 688 | **disabled**              | _Boolean_          | no       | false
 689 | **close-on-complete**     | _Boolean_          | no       | false
 690 | **auto-scroll**           | _Boolean_          | no       | false
 691 | **hour-range**            | _Array_            | no       | _undefined_
 692 | **minute-range**          | _Array_            | no       | _undefined_
 693 | **second-range**          | _Array_            | no       | _undefined_
 694 | **hide-disabled-hours**   | _Boolean_          | no       | false
 695 | **hide-disabled-minutes** | _Boolean_          | no       | false
 696 | **hide-disabled-seconds** | _Boolean_          | no       | false
 697 | **hide-disabled-items**   | _Boolean_          | no       | false
 698 | **advanced-keyboard**     | _Boolean_          | no       | false
 699 | **blur-delay**            | _Number_           | no       | 300
 700 | **manual-input**          | _Boolean_          | no       | false
 701 | **manual-input-timeout**  | _Number_           | no       | 1000
 702 | **hide-dropdown**         | _Boolean_          | no       | false
 703 | **fixed-dropdown-button** | _Boolean_          | no       | false
 704 | **drop-direction**        | _String_           | no       | "down"
 705 | **container-id**          | _String_           | no       | _undefined_
 706 | **drop-offset-height**    | _Number_           | no       | 160
 707 | **lazy**                  | _Boolean_          | no       | false
 708 | **append-to-body**        | _Boolean_          | no       | false
 709 | **debug-mode**            | _Boolean_          | no       | false
 710 | 
 711 | 
 712 | ## Input Props API
 713 | 
 714 | Prop              | Type                        | Required | Default Value
 715 | ------------------| --------------------------- | -------- | -------------
 716 | **id**            | _String_                    | no       | _undefined_
 717 | **name**          | _String_                    | no       | _undefined_
 718 | **placeholder**   | _String_                    | no       | _undefined_
 719 | **tabindex**      | _Number_                    | no       | 0
 720 | **autocomplete**  | _String_                    | no       | 'off'
 721 | **input-class**   | _String_, _Array_, _Object_ | no       | _undefined_
 722 | **input-width**   | _String_                    | no       | '10em'
 723 | 
 724 | Timepicker 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.
 725 | 
 726 | ### Input `id`, `name` and `tabindex`
 727 | 
 728 | ```html
 729 | <!-- id -->
 730 | <vue-timepicker id="myFirstPicker"></vue-timepicker>
 731 | 
 732 | <!-- name -->
 733 | <vue-timepicker name="nameInForm"></vue-timepicker>
 734 | 
 735 | <!-- tabindex -->
 736 | <vue-timepicker :tabindex="5"></vue-timepicker>
 737 | ```
 738 | 
 739 | ### Input `placeholder`
 740 | 
 741 | When `placeholder` is undefined, timepicker takes the determined format string instead.
 742 | 
 743 | ```html
 744 | <!-- placeholder is set -->
 745 | <vue-timepicker placeholder="Start Time"></vue-timepicker>
 746 | <!-- -> "Start Time" -->
 747 | 
 748 | <!-- placeholder not set -->
 749 | <vue-timepicker format="hh:mm A"></vue-timepicker>
 750 | <!-- -> "hh:mm A" -->
 751 | 
 752 | <!-- both placeholder and format are not set -->
 753 | <vue-timepicker></vue-timepicker>
 754 | <!-- -> "HH:mm" -->
 755 | ```
 756 | 
 757 | ### Input `autocomplete` Attribute
 758 | 
 759 | > **NOTE:** To use this property, you MUST ENABLE the `manual-input` mode _(v.1.1.0+)_ in the first place.
 760 | 
 761 | ```html
 762 | <!-- In Vue Template -->
 763 | <vue-timepicker name="starttime" autocomplete="on" manual-input></vue-timepicker>
 764 | ```
 765 | 
 766 | ```html
 767 | <!-- HTML result -->
 768 | <span class="vue__time-picker time-picker">
 769 |   <input class="display-time" name="starttime" type="text" autocomplete="on">
 770 |   <!-- ... -->
 771 | </span>
 772 | ```
 773 | 
 774 | When 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.
 775 | 
 776 | Please 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)).
 777 | 
 778 | 
 779 | ### The `input-class`
 780 | 
 781 | The `input-class` is assigned to the text input within the component as well.
 782 | 
 783 | ```html
 784 | <!-- Set your own `input-class` in the Vue template -->
 785 | <vue-timepicker input-class="my-awesome-picker"></vue-timepicker>
 786 | ```
 787 | 
 788 | ```html
 789 | <!-- HTML result -->
 790 | <span class="vue__time-picker time-picker">
 791 |   <input class="display-time my-awesome-picker" type="text" readonly="readonly">
 792 |   <!-- ... -->
 793 | </span>
 794 | ```
 795 | 
 796 | Start from `v1.0.4`, besides _String_ format, `input-class` accepts value in _Array_ and _Object_ type as well.
 797 | 
 798 | ```html
 799 | <!-- String type -->
 800 | <vue-timepicker input-class="your-awesome-timepicker i-am-vue2-timepicker"></vue-timepicker>
 801 | 
 802 | <!-- Array type -->
 803 | <vue-timepicker :input-class="['your-awesome-timepicker', 'i-am-vue2-timepicker']"></vue-timepicker>
 804 | 
 805 | <!-- Object type -->
 806 | <vue-timepicker :input-class="{
 807 |   'your-awesome-timepicker': true,
 808 |   'foo': false,
 809 |   'i-am-vue2-timepicker': true,
 810 |   'bar': false
 811 | }"></vue-timepicker>
 812 | ```
 813 | 
 814 | ```html
 815 | <!-- All of the three samples above return the same result in rendered HTML -->
 816 | <span class="vue__time-picker time-picker">
 817 |   <input class="display-time your-awesome-timepicker i-am-vue2-timepicker" type="text" readonly="readonly">
 818 |   <!-- ... -->
 819 | </span>
 820 | ```
 821 | 
 822 | ### The `input-width`
 823 | 
 824 | The `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.
 825 | 
 826 | ```html
 827 | <!-- In `px` -->
 828 | <vue-timepicker input-width="100px"></vue-timepicker>
 829 | 
 830 | <!-- In `em` -->
 831 | <vue-timepicker input-width="12em" format="HH:mm:ss"></vue-timepicker>
 832 | ```
 833 | 
 834 | 
 835 | ## Events API
 836 | 
 837 | Event          | Arguments      | Description
 838 | -------------- | -------------- | ----------------------
 839 | **input**      | (_value_)      | Emit after value changes
 840 | **change**     | (_eventData_)  | Emit after value changes
 841 | **open**       | &nbsp;         | Emit when the dropdown opens
 842 | **close**      | (_eventData_)  | Emit when the dropdown closes
 843 | **focus**      | &nbsp;         | Emit when the user start focusing on the `<input>`
 844 | **blur**       | (_eventData_)  | Emit when the user blurs the `<input>`
 845 | **error**      | (_eventData_)  | Emit when the input value becomes invalid
 846 | 
 847 | ### The `open` and `close` Event of the Dropdown Picker
 848 | 
 849 | Help to identify the current status of the dropdown picker
 850 | 
 851 | ```javascript
 852 | data () {
 853 |   return {
 854 |     dropdownStatus: 'closed'
 855 |   }
 856 | }
 857 | ```
 858 | 
 859 | ```html
 860 | <p>Dropdown Status: I'm {{dropdownStatus}}!</p>
 861 | 
 862 | <vue-timepicker @open="dropdownStatus = 'opened'" @close="dropdownStatus = 'closed'"></vue-timepicker>
 863 | ```
 864 | 
 865 | ### The `focus` and `blur` Event
 866 | 
 867 | It 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`.
 868 | 
 869 | ```javascript
 870 | data () {
 871 |   return {
 872 |     focusState: 'blurred'
 873 |   }
 874 | }
 875 | ```
 876 | 
 877 | ```html
 878 | <p>Focus State: {{focusState}}</p>
 879 | 
 880 | <vue-timepicker manual-input hide-dropdown @focus="focusState = 'focused'" @blur="focusState = 'blurred'"></vue-timepicker>
 881 | ```
 882 | 
 883 | ### The `error` event
 884 | 
 885 | Starts 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`.
 886 | 
 887 | ```html
 888 | <!-- Got the `hour-range` and `minute-interval` set -->
 889 | <!-- And add a hanlder to pick up the "error" event -->
 890 | <vue-timepicker format="H:mm:ss" v-model="erroredInputSample" :hour-range="[8, 9, 10, 11]" :minute-interval="5" @error="errorHanlder"></vue-timepicker>
 891 | ```
 892 | 
 893 | ```javascript
 894 | data () {
 895 |   return {
 896 |     erroredInputSample: { H: '5', mm: '03', ss: '00' }
 897 |     // NOTE:
 898 |     // H: '5' -> invalid. Value is not in the `hour-range` list
 899 |     // mm: '03' -> invalid. Value does not fit in the `minute-interval`
 900 |     // ss: '00' -> valid.
 901 |   }
 902 | },
 903 | 
 904 | methods: {
 905 |   errorHanlder (eventData) {
 906 |     console.log(eventData)
 907 |     // console.log outputs -> ["hour", "minute"]
 908 |   }
 909 | }
 910 | ```
 911 | 
 912 | The `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
 913 | 
 914 | > NOTE: Empty value will **not** be marked as invalid.
 915 | 
 916 | 
 917 | ## Helper CSS Class Names
 918 | 
 919 | Started 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.
 920 | 
 921 | - **invalid**: One or more fields containing an invalid or disabled value.
 922 |   - Additional CSS Style: The `<input>` border turns red.
 923 |   - If you want to mute this red border style, add `"skip-error-style"` to `input-class`
 924 | - **is-empty**: The input value (_v-model_) is empty. No additional style.
 925 | - **all-selected**: All fields (hour/minute/second/apm) required by the `format` string are not empty. No additional style.
 926 | 
 927 | ```html
 928 | <!-- To mute the red border style of "invalid" state -->
 929 | <timepicker input-class="skip-error-style"></timepicker>
 930 | <timepicker :input-class="['skip-error-style', 'your-other-class-names']"></timepicker>
 931 | ```
 932 | 
 933 | 
 934 | ## Miscellaneous Props API
 935 | 
 936 | Prop                    | Type      | Required | Default Value
 937 | ----------------------- | --------- | -------- | -------------
 938 | **hour-label**          | _String_  | no       | _undefined_
 939 | **minute-label**        | _String_  | no       | _undefined_
 940 | **second-label**        | _String_  | no       | _undefined_
 941 | **apm-label**           | _String_  | no       | _undefined_
 942 | **am-text**             | _String_  | no       | _undefined_
 943 | **pm-text**             | _String_  | no       | _undefined_
 944 | 
 945 | ### Customized Picker Labels
 946 | 
 947 | You 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`. 
 948 | 
 949 | Furthermore, you can replace those _am/pm_ (or _AM/PM_) string by setting the `am-text` and `pm-text` parameters.
 950 | 
 951 | > 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.
 952 | 
 953 | ```html
 954 | <!-- 24-hour format with customized hour and minute label -->
 955 | <vue-timepicker hour-label="heure" minute-label="minute"></vue-timepicker>
 956 | 
 957 | <!-- 12-hour format with customized am/pm text -->
 958 | <vue-timepicker hour-label="時" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a"></vue-timepicker>
 959 | ```
 960 | 
 961 | 
 962 | ## Slots
 963 | 
 964 | We 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.
 965 | 
 966 | Slot Name          | Position | Description   
 967 | ------------------ | -------- | --------------
 968 | **icon**           | _left_   | On the lefthand side of the `<input>`
 969 | **clearButton**    | _right_  | In the same spot of the default clear button
 970 | **dropdownButton** | _right_  | In the same spot of the default dropdown button
 971 | 
 972 | > 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.
 973 | 
 974 | ```html
 975 | <!-- For Vue 2.6.0+ -->
 976 | 
 977 | <!-- Input icon (image) -->
 978 | <vue-timepicker>
 979 |   <template v-slot:icon>
 980 |     <img src="$YOUR_ICON_SRC" />
 981 |   </template>
 982 | </vue-timepicker>
 983 | 
 984 | <!-- Customized clear button (image) -->
 985 | <vue-timepicker>
 986 |   <template v-slot:clearButton>
 987 |     <img src="$YOUR_CUSTOM_IMAGE_SRC" />
 988 |   </template>
 989 | </vue-timepicker>
 990 | 
 991 | <!-- Customized dropdown button (character entity) -->
 992 | <vue-timepicker manual-input hide-dropdown>
 993 |   <template v-slot:dropdownButton>&#x02263;</template>
 994 | </vue-timepicker>
 995 | ```
 996 | 
 997 | ## Contribution
 998 | 
 999 | Please feel free to fork and help developing. Check [CONTRIBUTING.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CONTRIBUTING.md) for more details.
1000 | 
1001 | ## Change Log
1002 | 
1003 | Detail changes of each release: [CHANGELOG.md](https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md)
1004 | 
1005 | ## License
1006 | 
1007 | [MIT](https://github.com/phoenixwong/vue2-timepicker/blob/master/LICENSE.md)
1008 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | yarn.lock*
 5 | package.lock*
 6 | 
 7 | # local env files
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
 1 | # Vue2 Timepicker Demo
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/demo/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue2-timepicker-demo",
 3 |   "version": "1.1.6",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "highlight.js": "^9.18.5",
13 |     "vue": "^2.6.11",
14 |     "vue-highlight.js": "^3.1.0"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^4.3.1",
18 |     "@vue/cli-plugin-eslint": "^4.3.1",
19 |     "@vue/cli-service": "^4.3.1",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.8.0",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "stylus": "^0.54.7",
24 |     "stylus-loader": "^3.0.2",
25 |     "vue-cli-plugin-pug": "^1.0.7",
26 |     "vue-template-compiler": "^2.6.11"
27 |   },
28 |   "eslintConfig": {
29 |     "root": false,
30 |     "env": {
31 |       "node": true
32 |     },
33 |     "extends": [
34 |       "plugin:vue/essential",
35 |       "eslint:recommended"
36 |     ],
37 |     "rules": {},
38 |     "parserOptions": {
39 |       "parser": "babel-eslint"
40 |     }
41 |   },
42 |   "postcss": {
43 |     "plugins": {
44 |       "autoprefixer": {}
45 |     }
46 |   },
47 |   "browserslist": [
48 |     "> 1%",
49 |     "last 2 versions"
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/phoenixwong/vue2-timepicker/8f9371f9d8cecccf2d0e23bec29861e1d4fc2df0/demo/public/favicon.ico


--------------------------------------------------------------------------------
/demo/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1.0, minimum-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Vue2 Timepicker Demo</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue2-timepicker-3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |     <a href="https://github.com/phoenixwong/vue2-timepicker" target="_blank"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/demo/src/App.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import Samples from './components/Samples'
  3 | import Playground from './components/Playground'
  4 | 
  5 | export default {
  6 |   name: 'VueTimepickerDemo',
  7 | 
  8 |   components: {
  9 |     Samples,
 10 |     Playground
 11 |   },
 12 | 
 13 |   data () {
 14 |     return {
 15 |       currentView: 'samples',
 16 |       stickyNav: false,
 17 | 
 18 |       scrollTop: 0
 19 |     }
 20 |   },
 21 | 
 22 |   methods: {
 23 |     switchView (target) {
 24 |       try {
 25 |         history.replaceState(null, null, ' ')
 26 |       } catch (e) {
 27 |         // Failsafe for outdated browsers. Do nothing here.
 28 |       }
 29 |       this.currentView = target
 30 |       this.$nextTick(() => {
 31 |         if (document.documentElement && document.documentElement.scrollTop) {
 32 |           document.documentElement.scrollTop = 0
 33 |         } else if (document.body.parentNode && document.body.parentNode.scrollTop) {
 34 |           document.body.parentNode.scrollTop = 0
 35 |         } else {
 36 |           document.body.scrollTop = 0
 37 |         }
 38 |       })
 39 |     },
 40 | 
 41 |     scrollHandler (evt) {
 42 |       this.scrollTop = (evt.target.scrollingElement || (document.documentElement || document.body.parentNode)).scrollTop || 0
 43 |       if (this.scrollTop > 150) {
 44 |         if (!this.stickyNav) {
 45 |           this.stickyNav = true
 46 |         }
 47 |       } else {
 48 |         if (this.stickyNav) {
 49 |           this.stickyNav = false
 50 |         }
 51 |       }
 52 |     }
 53 |   },
 54 | 
 55 |   mounted () {
 56 |     window.addEventListener('scroll', this.scrollHandler)
 57 |   },
 58 | 
 59 |   beforeDestroy () {
 60 |     window.removeEventListener('scroll', this.scrollHandler)
 61 |   }
 62 | }
 63 | </script>
 64 | 
 65 | <template lang="pug">
 66 | #app.main-wrapper
 67 | 
 68 |   header(v-cloak)
 69 |     h1
 70 |       | Vue
 71 |       span.version 2
 72 |       | Timepicker
 73 | 
 74 |   nav.top-nav(:class="{stick: stickyNav}")
 75 |     span.title
 76 |       | Vue
 77 |       i 2
 78 |       | &nbsp;Timepicker
 79 | 
 80 |     ul
 81 |       li
 82 |         a(:class="{active: currentView === 'samples'}" @click="switchView('samples')") Common Usage
 83 |       li
 84 |         a(:class="{active: currentView === 'playground'}" @click="switchView('playground')") Playground
 85 |       li
 86 |         a(href="https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md" target="_blank") Documentation
 87 | 
 88 |     span.version
 89 |       a(href="https://www.npmjs.com/package/vue2-timepicker" target="_blank")
 90 |         img(alt="NPM latest version" src="https://img.shields.io/npm/v/vue2-timepicker?style=flat-square")
 91 |     span.downloads
 92 |       a(href="https://www.npmjs.com/package/vue2-timepicker" target="_blank")
 93 |         img(alt="NPM downloads" src="https://img.shields.io/npm/dm/vue2-timepicker?style=flat-square")
 94 | 
 95 |   main.content(:class="{'nav-affixed': stickyNav}")
 96 |     transition(name="fade" mode="out-in")
 97 |       component(:is="currentView")
 98 | 
 99 |         //- Footer
100 |         template(slot="footer-links")
101 |           h3.title
102 |             a#more.anchor #
103 |             | More complex usage
104 |           .description
105 |             p
106 |               | Didn't find what you need? Please check the&nbsp;
107 |               a(@click="switchView('playground')") Playground
108 |               | &nbsp;or&nbsp;
109 |               a(href="https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md" target="_blank" title="Vue2-Timepicker Documentation") Documentation
110 |               | &nbsp;for more inspiration.
111 | </template>
112 | 
113 | <style lang="stylus">
114 | @import './assets/demo.styl';
115 | </style>
116 | 


--------------------------------------------------------------------------------
/demo/src/assets/_variables.styl:
--------------------------------------------------------------------------------
 1 | $vue-green = #41B883
 2 | $vue-green-light = lighten($vue-green, 5%)
 3 | $vue-dark = #35495E
 4 | $vue-darker = darken($vue-dark, 25%)
 5 | $body-color = #555
 6 | $dark-grey = #777
 7 | 
 8 | -black($alpha)
 9 |   rgba(0, 0, 0, $alpha)
10 | 
11 | -white($alpha)
12 |   rgba(255, 255, 255, $alpha)
13 | 


--------------------------------------------------------------------------------
/demo/src/assets/demo.styl:
--------------------------------------------------------------------------------
  1 | @import './_variables.styl'
  2 | 
  3 | body,
  4 | html
  5 |   margin: 0
  6 |   padding: 0
  7 |   font-family: sans-serif
  8 |   color: $body-color
  9 |   -webkit-font-smoothing: antialiased
 10 |   -moz-osx-font-smoothing: grayscale
 11 | 
 12 | body
 13 |   font-size: 16px
 14 | 
 15 | h2,
 16 | h3,
 17 | h4
 18 |   color: $vue-dark
 19 | 
 20 | h2
 21 |   margin: 2em 0 1.5em 0
 22 | 
 23 | h3
 24 |   margin: 0 0 1em 0
 25 | 
 26 | h4
 27 |   margin-bottom: 0.5em
 28 | 
 29 | section
 30 |   width: 80%
 31 |   max-width: 1000px
 32 |   margin: 0 auto 2em auto
 33 | 
 34 | a
 35 |   color: $vue-green
 36 |   text-decoration: none
 37 | 
 38 | header
 39 |   background: $vue-darker
 40 |   color: #fff
 41 |   text-align: center
 42 |   height: 150px
 43 |   display: flex
 44 |   flex-flow: column nowrap
 45 |   justify-content: center
 46 |   align-items: center
 47 |   position: relative
 48 | 
 49 |   h1
 50 |     margin: 0
 51 |     color: $vue-green-light
 52 |     .version
 53 |       font-weight: 300
 54 |       margin: 0 .2em 0 .1em
 55 | 
 56 |   p
 57 |     margin-bottom: 0
 58 |     color: -white(0.3)
 59 |     font-size: 300
 60 | 
 61 |     .version
 62 |       font-weight: 100
 63 |       background-color: alpha($vue-dark, 0.7)
 64 |       padding: .1em .5em
 65 |       border-radius: 3px
 66 | 
 67 | button
 68 |   display: inline-block
 69 |   outline: 0
 70 |   background: $vue-green
 71 |   border: 1px solid $vue-green
 72 |   color: #fff
 73 |   border-radius: 4px
 74 |   font-size: 0.9em
 75 |   vertical-align: baseline
 76 |   padding: 0.3em 0.5em
 77 |   transition: opacity 0.3s
 78 |   cursor: pointer
 79 |   &:hover
 80 |     opacity: 0.7
 81 | 
 82 | button.common
 83 |   background: #fff
 84 |   border: 1px solid $vue-green
 85 |   color: $vue-green
 86 | 
 87 | button.secondary
 88 |   background: #fff
 89 |   border: 1px solid $vue-darker
 90 |   color: $vue-darker
 91 | 
 92 | button.size-small
 93 |   font-size 0.8em;
 94 |   padding: 0.2em 0.4em;
 95 | 
 96 | nav.top-nav
 97 |   background: $vue-darker
 98 |   position: relative
 99 | 
100 |   .title
101 |     display: none
102 | 
103 |   span.version,
104 |   span.downloads
105 |     a
106 |       border: 0
107 |       text-decoration: none
108 | 
109 |   span.version
110 |     position: absolute
111 |     z-index: 301
112 |     right: 1em
113 |     bottom: .5em
114 | 
115 |   span.downloads
116 |     position: absolute
117 |     z-index: 301
118 |     left: .8em
119 |     bottom: .5em
120 | 
121 |   &.stick
122 |     position: fixed
123 |     top: 0
124 |     left: 0
125 |     right: 0
126 |     z-index: 300
127 | 
128 |     .title
129 |       display: inline-block
130 |       color: -white(0.7)
131 |       position: absolute
132 |       z-index: 301
133 |       left: 1em
134 |       top: .8em
135 | 
136 |     span.downloads
137 |       display: none
138 | 
139 |   ul
140 |     list-style: none
141 |     padding: 0
142 |     margin: 0
143 |     display: flex
144 |     flex-flow: row nowrap
145 |     justify-content: center
146 |     align-items: stretch
147 | 
148 |     li
149 |       margin: 0 1em
150 |       overflow: hidden
151 |       a
152 |         color: -white(0.5)
153 |         display: block
154 |         padding: .8em .5em
155 |         border-radius: 5px
156 | 
157 |         -webkit-transition: color .3s
158 |         transition: color .3s
159 | 
160 |         position: relative
161 |         overflow: hidden
162 |         z-index: 1
163 | 
164 |         &:hover
165 |           color: alpha($vue-green, 0.7)
166 |           cursor: pointer
167 | 
168 |         &.active
169 |           color: $vue-green-light
170 | 
171 |           &:after
172 |             content: ''
173 |             display: block
174 |             width: 0
175 |             height: 0
176 |             border: 10px solid transparent
177 |             border-bottom-color: #fff
178 |             position: absolute
179 |             bottom: -3px
180 |             left: calc(50% - 10px)
181 |             z-index: 3
182 | 
183 | main.content
184 |   &.nav-affixed
185 |     padding-top: 44px
186 | 
187 | .fade
188 |   transition: opacity .5s ease
189 | 
190 | .fade-enter-active, .fade-leave-active
191 |   opacity: 0
192 | 
193 | .description
194 |   p
195 |     line-height: 1.5em
196 |   code
197 |     color: $vue-dark
198 |     background: -black(0.03)
199 |     border-radius: 3px
200 |     padding: 0.2em 0.5em
201 |     margin: 0 0.2em
202 |     vertical-align: baseline
203 | 
204 | .preview
205 |   padding: 2em 1.5em
206 |   border: 1px solid -black(0.07)
207 |   border-radius: 3px
208 |   b
209 |     font-size: 0.9em
210 |     color: $dark-grey
211 |   p
212 |     margin: 0
213 |     padding: .5em 0 1.5em 0
214 |     &:last-of-type
215 |       padding-bottom: 0
216 | 
217 | .codes
218 |   pre
219 |     position: relative
220 |     font-size: 0.8em
221 |     code
222 |       padding: 2em
223 |       border-radius: 3px
224 | 
225 |     &:after
226 |       content: attr(data-title)
227 |       position: absolute
228 |       top: 0.3em
229 |       right: 0.8em
230 |       font-size: 0.8em
231 |       color: alpha($vue-dark, 0.6)
232 | 
233 | .capitailized
234 |   text-transform: uppercase
235 | 


--------------------------------------------------------------------------------
/demo/src/components/ConfigRow.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'ConfigRow',
 4 |   props: {
 5 |     label: { type: String },
 6 |     isGroup: { type: Boolean, default: false }
 7 |   }
 8 | }
 9 | </script>
10 | 
11 | <template lang="pug">
12 | .config-row(:class="{'group': isGroup }")
13 |   label.row-label(v-if="this.label && this.label.length") {{ label }}
14 |   slot
15 | </template>
16 | 
17 | <style lang="stylus">
18 | .config-row
19 |   padding: 0.5em 0
20 |   display: flex
21 |   flex-flow: row wrap
22 |   justify-content: flex-start
23 |   align-items: center
24 |   align-content: flex-start
25 | 
26 |   .row-label
27 |     display: inline-block
28 |     font-weight: bold
29 |     width: 5em
30 |     text-align: right
31 |     margin-right: 0.5em
32 | 
33 |   label.options
34 |     min-width: 3em
35 |     margin-right: 0.5em
36 |     display: inline-flex
37 |     flex-flow: row wrap
38 |     justify-content: flex-start
39 |     align-items: center
40 |     position: relative
41 |     input[type=radio],
42 |     input[type=checkbox]
43 |       position: relative
44 |       top: -0.1em
45 | 
46 |   .range-wrapper
47 |     display: inline-flex
48 |     flex-flow: row nowrap
49 |     justify-content: flex-start
50 |     align-items: center
51 |     input[type=range]
52 |       margin-right: 0.8em
53 | 
54 |   &.group
55 |     padding-left: 1em
56 |     display: flex
57 |     flex-flow: row wrap
58 |     justify-content: flex-start
59 |     align-items: center
60 | </style>
61 | 


--------------------------------------------------------------------------------
/demo/src/components/OverlayPanel.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 |   name: 'OverlayPanel',
  4 |   props: {
  5 |     title: { type: String }
  6 |   },
  7 |   methods: {
  8 |     closePanel () {
  9 |       this.$emit('close')
 10 |     }
 11 |   }
 12 | }
 13 | </script>
 14 | 
 15 | <template lang="pug">
 16 | .overlay-panel(@click="closePanel")
 17 |   .panel-body(@click.stop="")
 18 |     .panel-title
 19 |       .title-text(v-if="title" v-text="title")
 20 |       .close-btn(@click="closePanel") &times;
 21 |     .panel-content
 22 |       slot
 23 |     .panel-footer
 24 |       .footer-left
 25 |         slot(name="footerLeft")
 26 |       .footer-right
 27 |         slot(name="footerRight")
 28 | </template>
 29 | 
 30 | <style lang="stylus">
 31 | @import '../assets/_variables.styl'
 32 | 
 33 | .overlay-panel
 34 |   position: fixed
 35 |   top: 0
 36 |   left: 0
 37 |   bottom: 0
 38 |   right: 0
 39 |   background: -black(0.7)
 40 |   z-index: 5000
 41 | 
 42 |   display: flex
 43 |   flex-flow: column nowrap
 44 |   justify-content: center
 45 |   align-items: center
 46 | 
 47 |   .panel-body
 48 |     width: 500px
 49 |     max-width: 80vw
 50 |     max-height: 70vh
 51 |     min-height: 200px
 52 |     background: #fff
 53 |     border-radius: 6px
 54 |     box-shadow: 0 .1em 0.5em -black(0.35)
 55 | 
 56 |     display: flex
 57 |     flex-flow: column nowrap
 58 |     justify-content: flex-start
 59 |     align-items: stretch
 60 | 
 61 |     .panel-title
 62 |       display: flex
 63 |       flex-flow: row nowrap
 64 |       justify-content: flex-end
 65 |       align-items: center
 66 |       padding: 0.6em 0.8em 0.5em 0.8em
 67 |       border-bottom: 1px solid -black(0.1)
 68 | 
 69 |       .title-text
 70 |         flex: 1 1 0.00001px
 71 |         color: $vue-dark
 72 |         line-height: 120%
 73 |         font-weight: bold
 74 |         font-size: 1.2em
 75 |       
 76 |       .close-btn
 77 |         margin-left: 1em
 78 |         font-size: 1.2em
 79 |         line-height: 100%
 80 |         position: relative
 81 |         top: -.2em
 82 |         cursor: pointer
 83 |         transition: opacity .3s
 84 |         &:hover
 85 |           opacity: 0.4
 86 | 
 87 |     .panel-content
 88 |       flex: 1 1 0.00001px
 89 |       padding: 1em 0.8em
 90 |     
 91 |     .panel-footer
 92 |       border-top: 1px solid -black(0.1)
 93 |       padding: 0.5em 0.6em 0.5em 0.8em
 94 |       display: flex
 95 |       flex-flow: row nowrap
 96 |       justify-content: flex-start
 97 |       align-items: center
 98 | 
 99 |       .footer-left
100 |         flex: 1 1 0.00001px
101 |         button:not(:first-of-type)
102 |           margin-left: 0.6em
103 | </style>
104 | 


--------------------------------------------------------------------------------
/demo/src/components/Playground.vue:
--------------------------------------------------------------------------------
   1 | <script>
   2 | import VueTimepicker from '../../../src/vue-timepicker'
   3 | import ConfigRow from './ConfigRow'
   4 | import OverlayPanel from './OverlayPanel'
   5 | 
   6 | export default {
   7 |   name: 'Playground',
   8 |   components: {
   9 |     VueTimepicker,
  10 |     ConfigRow,
  11 |     OverlayPanel
  12 |   },
  13 | 
  14 |   data () {
  15 |     return {
  16 |       tokens: {
  17 |         hour: ['HH', 'H', 'hh', 'h', 'kk', 'k'],
  18 |         minute: ['mm', 'm'],
  19 |         second: ['ss', 's', 'none'],
  20 |         apm: ['A', 'a']
  21 |       },
  22 | 
  23 |       type: {
  24 |         hour: 'hh',
  25 |         minute: 'mm',
  26 |         second: 'ss',
  27 |         apm: 'A'
  28 |       },
  29 | 
  30 |       selected: {
  31 |         hour: 1,
  32 |         minute: 0,
  33 |         second: 0,
  34 |         apm: 'am'
  35 |       },
  36 | 
  37 |       hourBoundary: {
  38 |         min: 1,
  39 |         max: 12
  40 |       },
  41 | 
  42 |       interval: {
  43 |         minute: 1,
  44 |         second: 1
  45 |       },
  46 | 
  47 |       customInterval: {
  48 |         minute: false,
  49 |         second: false
  50 |       },
  51 | 
  52 |       customRange: {
  53 |         hour: false,
  54 |         minute: false,
  55 |         second: false
  56 |       },
  57 |       showRangePanel: false,
  58 |       rangeList: undefined,
  59 |       editingRange: '',
  60 |       selectedRanges: [],
  61 |       rangeTitle: '',
  62 | 
  63 |       hourRange: [],
  64 |       minuteRange: [],
  65 |       secondRange: [],
  66 | 
  67 |       hideClearBtn: false,
  68 |       disablePicker: false,
  69 |       closeOnComplete: false,
  70 |       advancedKeyboard: false,
  71 |       manualInput: false,
  72 |       hideDropdown: false,
  73 |       fixedDropdownBtn: false,
  74 |       lazyMode: false,
  75 |       autoScroll: false,
  76 |       skipErrorStyle: false,
  77 |       appendToBody: false,
  78 |       debugMode: false,
  79 | 
  80 |       customBlurDelay: false,
  81 |       blurDelay: 300,
  82 | 
  83 |       customManualInputTimeout: false,
  84 |       manualInputTimeout: 1000,
  85 | 
  86 |       playgroundData: {},
  87 |       playgroundFullValue: {},
  88 |       playgroundErroredData: undefined,
  89 | 
  90 |       scrollTop: 0,
  91 | 
  92 |       muteChange: false
  93 |     }
  94 |   },
  95 | 
  96 |   computed: {
  97 |     formatString () {
  98 |       let formatString = `${this.type.hour}:${this.type.minute}`
  99 |       if (this.showSeconds) {
 100 |         formatString += (`:${this.type.second}`)
 101 |       }
 102 |       if (this.type.apm) {
 103 |         formatString += (` ${this.type.apm}`)
 104 |       }
 105 |       return formatString
 106 |     },
 107 | 
 108 |     needApm () {
 109 |       return this.type.hour === 'h' || this.type.hour === 'hh'
 110 |     },
 111 | 
 112 |     showSeconds () {
 113 |       return this.type.second !== 'none'
 114 |     },
 115 | 
 116 |     yourTimeValue () {
 117 |       let code = 'yourTimeValue: {\n'
 118 |       code += this.listTimeValue()
 119 |       code += '\n}'
 120 |       return code
 121 |     },
 122 | 
 123 |     asideStyle () {
 124 |       const initPaddingTop = 220
 125 |       const minPaddingTop = 50
 126 |       return {
 127 |         paddingTop: (Math.max(initPaddingTop - this.scrollTop, minPaddingTop)) + 'px'
 128 |       }
 129 |     },
 130 | 
 131 |     filteredOutValues () {
 132 |       if (!this.showRangePanel || !this.rangeList || !this.selectedRanges.length) { return }
 133 |       const result = []
 134 |       this.selectedRanges.forEach(selected => {
 135 |         if (selected && !this.rangeList.includes(selected)) {
 136 |           result.push(selected)
 137 |         }
 138 |       })
 139 |       return result
 140 |     },
 141 | 
 142 |     toHideDropdown () {
 143 |       if (!this.manualInput) { return false }
 144 |       return this.hideDropdown
 145 |     },
 146 | 
 147 |     showErroredData () {
 148 |       return Boolean(this.playgroundErroredData && this.playgroundErroredData.length)
 149 |     },
 150 | 
 151 |     htmlCodeWithVar () {
 152 |       let start = '<vue-timepicker'
 153 |       let end = '\n  v-model="yourTimeValue">\n</vue-timepicker>'
 154 | 
 155 |       start += (`\n  format="${this.formatString}"`)
 156 | 
 157 |       if (this.skipErrorStyle) {
 158 |         start += ('\n  input-class="skip-error-style"')
 159 |       }
 160 | 
 161 |       if (this.customInterval.minute) {
 162 |         start += (`\n  :minute-interval="${this.interval.minute}"`)
 163 |       }
 164 | 
 165 |       if (this.showSeconds && this.customInterval.second) {
 166 |         start += (`\n  :second-interval="${this.interval.second}"`)
 167 |       }
 168 | 
 169 |       if (this.customRange.hour && this.hourRange) {
 170 |         const hrRange = this.sortAndStringify(this.hourRange, this.needApm)
 171 |         start += (`\n  :hour-range="${hrRange}"`)
 172 |       }
 173 | 
 174 |       if (this.customRange.minute && this.minuteRange) {
 175 |         const minRange = this.sortAndStringify(this.minuteRange)
 176 |         start += (`\n  :minute-range="${minRange}"`)
 177 |       }
 178 | 
 179 |       if (this.showSeconds && this.customRange.second && this.secondRange) {
 180 |         const secRange = this.sortAndStringify(this.secondRange)
 181 |         start += (`\n  :second-range="${secRange}"`)
 182 |       }
 183 | 
 184 |       if (this.customBlurDelay) {
 185 |         start += (`\n  :blur-delay="${this.blurDelay}"`)
 186 |       }
 187 | 
 188 |       if (this.customManualInputTimeout) {
 189 |         start += (`\n  :manual-input-timeout="${this.manualInputTimeout}"`)
 190 |       }
 191 | 
 192 |       if (this.lazyMode) {
 193 |         start += ('\n  lazy')
 194 |       }
 195 | 
 196 |       if (this.closeOnComplete) {
 197 |         start += ('\n  close-on-complete')
 198 |       }
 199 | 
 200 |       if (this.manualInput) {
 201 |         start += ('\n  manual-input')
 202 |       }
 203 | 
 204 |       if (this.toHideDropdown) {
 205 |         start += ('\n  hide-dropdown')
 206 |       }
 207 | 
 208 |       if (this.advancedKeyboard) {
 209 |         start += ('\n  advanced-keyboard')
 210 |       }
 211 | 
 212 |       if (this.fixedDropdownBtn) {
 213 |         start += ('\n  fixed-dropdown-button')
 214 |       }
 215 | 
 216 |       if (this.hideClearBtn) {
 217 |         start += ('\n  hide-clear-button')
 218 |       }
 219 | 
 220 |       if (this.autoScroll) {
 221 |         start += ('\n  auto-scroll')
 222 |       }
 223 | 
 224 |       if (this.appendToBody) {
 225 |         start += ('\n  append-to-body')
 226 |       }
 227 | 
 228 |       if (this.disablePicker) {
 229 |         start += ('\n  disabled')
 230 |       }
 231 | 
 232 |       if (this.debugMode) {
 233 |         start += ('\n  debug-mode')
 234 |       }
 235 | 
 236 |       const htmlCode = start + end
 237 | 
 238 |       return htmlCode
 239 |     }
 240 |   },
 241 | 
 242 |   watch: {
 243 |     selected: {
 244 |       deep: true,
 245 |       handler () {
 246 |         this.updatePlaygroundData()
 247 |       }
 248 |     },
 249 | 
 250 |     type: {
 251 |       deep: true,
 252 |       handler () {
 253 |         this.updatePlaygroundData()
 254 |       }
 255 |     },
 256 | 
 257 |     'type.hour' (newType, oldType) {
 258 |       if (this.customRange.hour && this.hourRange.length) {
 259 |         const newRangeList = this.hourRange.map(item => {
 260 |           return this.transformHourRange(item, oldType, newType)
 261 |         })
 262 |         this.hourRange = newRangeList
 263 |       }
 264 |     },
 265 | 
 266 |     'type.minute' (newType) {
 267 |       if (this.customRange.minute && this.minuteRange.length) {
 268 |         const newRangeList = this.minuteRange.map(item => {
 269 |           return this.formatValue(newType, +item)
 270 |         })
 271 |         this.minuteRange = newRangeList
 272 |       }
 273 |     },
 274 | 
 275 |     'type.second' (newType) {
 276 |       if (newType !== 'none' && this.customRange.second && this.secondRange.length) {
 277 |         const newRangeList = this.secondRange.map(item => {
 278 |           return this.formatValue(newType, +item)
 279 |         })
 280 |         this.secondRange = newRangeList
 281 |       }
 282 |     },
 283 | 
 284 |     needApm (isNeeded) {
 285 |       if (isNeeded) {
 286 |         if (!this.selected.apm) {
 287 |           this.$set(this.type, 'apm', 'A')
 288 |           this.$set(this.selected, 'apm', 'am')
 289 |         }
 290 |       } else {
 291 |         this.$set(this.type, 'apm', '')
 292 |         this.$set(this.selected, 'apm', '')
 293 |       }
 294 |     },
 295 | 
 296 |     customInterval: {
 297 |       deep: true,
 298 |       handler (custom) {
 299 |         if (!custom.minute) {
 300 |           this.$set(this.interval, 'minute', 1)
 301 |         }
 302 |         if (!custom.second) {
 303 |           this.$set(this.interval, 'second', 1)
 304 |         }
 305 |       }
 306 |     }
 307 |   },
 308 | 
 309 |   methods: {
 310 |     updateHourRange (hourType) {
 311 |       hourType = hourType || this.type.hour
 312 |       let hourBoundary = {}
 313 |       switch (hourType) {
 314 |         case 'h':
 315 |         case 'hh':
 316 |           hourBoundary.min = 1
 317 |           hourBoundary.max = 12
 318 |           break
 319 |         case 'H':
 320 |         case 'HH':
 321 |           hourBoundary.min = 0
 322 |           hourBoundary.max = 23
 323 |           break
 324 |         case 'k':
 325 |         case 'kk':
 326 |           hourBoundary.min = 1
 327 |           hourBoundary.max = 24
 328 |           break
 329 |       }
 330 |       this.hourBoundary = hourBoundary
 331 |       this.handleOutRangeData()
 332 |     },
 333 | 
 334 |     handleOutRangeData () {
 335 |       if (this.selected.hour > this.hourBoundary.max) {
 336 |         this.$set(this.selected, 'hour', this.hourBoundary.max)
 337 |       } else if (this.selected.hour < this.hourBoundary.min) {
 338 |         this.$set(this.selected, 'hour', this.hourBoundary.min)
 339 |       }
 340 |     },
 341 | 
 342 |     isNumber (value) {
 343 |       return !isNaN(parseFloat(value)) && isFinite(value)
 344 |     },
 345 | 
 346 |     formatValue (type, value) {
 347 |       switch (type) {
 348 |         case 'H':
 349 |         case 'h':
 350 |         case 'k':
 351 |         case 'm':
 352 |         case 's':
 353 |           if (type === 'h' && value === 0) {
 354 |             return '12'
 355 |           }
 356 |           return String(value)
 357 |         case 'HH':
 358 |         case 'hh':
 359 |         case 'kk':
 360 |         case 'mm':
 361 |         case 'ss':
 362 |           if (type === 'hh' && value === 0) {
 363 |             return '12'
 364 |           }
 365 |           return value < 10 ? `0${value}` : String(value)
 366 |         default:
 367 |           return ''
 368 |       }
 369 |     },
 370 | 
 371 |     translate12hRange (value) {
 372 |       const valueT = value.match(/^(\d{1,2})(a|p|A|P)$/)
 373 |       if (+valueT[1] === 12) {
 374 |         return +valueT[1] + (valueT[2].toLowerCase() === 'p' ? 0 : 12)
 375 |       }
 376 |       return +valueT[1] + (valueT[2].toLowerCase() === 'p' ? 12 : 0)
 377 |     },
 378 | 
 379 |     interpretKtoRangeType (kValue, toType) {
 380 |       if (!toType || toType === 'k') { return String(kValue) }
 381 |       let value
 382 |       switch (toType) {
 383 |         case 'H':
 384 |         case 'HH':
 385 |           value = (kValue === 24) ? 0 : kValue
 386 |           if (toType === 'HH') {
 387 |             return value < 10 ? `0${value}` : String(value)
 388 |           }
 389 |           return String(value)
 390 |         case 'h':
 391 |         case 'hh':
 392 |           if (kValue === 24) {
 393 |             return `12a`
 394 |           } else if (kValue === 12) {
 395 |             return `12p`
 396 |           }
 397 |           value = kValue % 12
 398 |           if (toType === 'hh') {
 399 |             const valueStr = value < 10 ? `0${value}` : String(value)
 400 |             return kValue < 12 ? `${valueStr}a` : `${valueStr}p`
 401 |           }
 402 |           return kValue < 12 ? `${value}a` : `${value}p`
 403 |         case 'kk':
 404 |           return kValue < 10 ? `0${kValue}` : String(kValue)
 405 |       }
 406 |     },
 407 | 
 408 |     transformHourRange (value, fromType, toType) {
 409 |       if (!fromType || !toType) { return value }
 410 |       let valueInK
 411 |       if (fromType === 'hh' || fromType === 'h') {
 412 |         valueInK = this.translate12hRange(value)
 413 |       } else if (fromType === 'HH' || fromType === 'H') {
 414 |         valueInK = +value === 0 ? 24 : +value
 415 |       } else {
 416 |         valueInK = +value
 417 |       }
 418 |       return this.interpretKtoRangeType(valueInK, toType)
 419 |     },
 420 | 
 421 |     updatePlaygroundData () {
 422 |       let data = {}
 423 | 
 424 |       if (this.isNumber(this.selected.hour)) {
 425 |         data[this.type.hour] = this.formatValue(this.type.hour, this.selected.hour)
 426 |       } else {
 427 |         data[this.type.hour] = ''
 428 |       }
 429 | 
 430 |       if (this.isNumber(this.selected.minute)) {
 431 |         data[this.type.minute] = this.formatValue(this.type.minute, this.selected.minute)
 432 |       } else {
 433 |         data[this.type.minute] = ''
 434 |       }
 435 | 
 436 |       if (this.showSeconds) {
 437 |         if (this.isNumber(this.selected.second)) {
 438 |           data[this.type.second] = this.formatValue(this.type.second, this.selected.second)
 439 |         } else {
 440 |           data[this.type.second] = ''
 441 |         }
 442 |       }
 443 | 
 444 |       if (this.type.apm) {
 445 |         if (this.selected.apm) {
 446 |           data[this.type.apm] = this.type.apm === 'A' ? (this.selected.apm).toUpperCase() : this.selected.apm
 447 |         } else {
 448 |           data[this.type.apm] = ''
 449 |         }
 450 |       }
 451 | 
 452 |       this.playgroundData = data
 453 |     },
 454 | 
 455 |     listTimeValue () {
 456 |       const data = this.playgroundData
 457 |       const len = Object.keys(data).length
 458 |       let string = ''
 459 |       Object.keys(data).forEach((k, i) => {
 460 |         string += `  ${k}: "${data[k]}"`
 461 |         if (i < len - 1) {
 462 |           string += '\n'
 463 |         }
 464 |       })
 465 |       return string
 466 |     },
 467 | 
 468 |     updateRangeValue (data) {
 469 |       this.muteChange = true
 470 |       this.$set(this.selected, 'hour', this.isNumber(data[this.type.hour]) ? Number(data[this.type.hour]) : '')
 471 |       this.$set(this.selected, 'minute', this.isNumber(data[this.type.minute]) ? Number(data[this.type.minute]) : '')
 472 |       this.$set(this.selected, 'second', this.isNumber(data[this.type.second]) ? Number(data[this.type.second]) : '')
 473 |       this.$set(this.selected, 'apm', data[this.type.apm] ? (data[this.type.apm] || '').toLowerCase() : '')
 474 |       this.muteChange = false
 475 |     },
 476 | 
 477 |     changeHandler (eventData) {
 478 |       this.playgroundFullValue = eventData
 479 |       this.updateRangeValue(eventData.data)
 480 |     },
 481 | 
 482 |     errorHandler (eventData) {
 483 |       this.playgroundErroredData = eventData
 484 |     },
 485 | 
 486 |     scrollHandler (evt) {
 487 |       this.scrollTop = (evt.target.scrollingElement || (document.documentElement || document.body.parentNode)).scrollTop || 0
 488 |     },
 489 | 
 490 |     sortAndStringify (arrayList, is12Hour) {
 491 |       if (!arrayList || !arrayList.length) { return JSON.stringify([]) }
 492 |       let newList = [].concat([], arrayList)
 493 |       if (is12Hour) {
 494 |         newList.sort((l, r) => {
 495 |           const lPart = l.match(/^(\d{1,2})(a|p)$/)
 496 |           const rPart = r.match(/^(\d{1,2})(a|p)$/)
 497 |           const lApm = lPart[2]
 498 |           const rApm = rPart[2]
 499 |           if (lApm === 'a' && rApm === 'p') { return -1 }
 500 |           if (lApm === 'p' && rApm === 'a') { return 1 }
 501 |           const lNum = +lPart[1]
 502 |           const rNum = +rPart[1]
 503 |           if (lNum === 12) { return -1 }
 504 |           if (rNum === 12) { return 1 }
 505 |           return lNum < rNum ? -1 : 1
 506 |         })
 507 |         const uniStrList = newList.map(item => {
 508 |           const itemP = item.match(/^(\d{1,2})(a|p)$/)
 509 |           return `${+itemP[1]}${itemP[2]}`
 510 |         })
 511 |         return JSON.stringify(uniStrList).replace(/"/g, '\'')
 512 |       } else {
 513 |         newList.sort((l, r) => (+l < +r) ? -1 : 1)
 514 |         const numericList = newList.map(item => +item)
 515 |         return JSON.stringify(numericList).replace(/"/g, '')
 516 |       }
 517 |     },
 518 | 
 519 |     genHourRangeList () {
 520 |       const result = []
 521 |       for (let i = 0; i < 24; i++) {
 522 |         // 12-Hour format
 523 |         if (this.type.hour === 'h' || this.type.hour === 'hh') {
 524 |           let value = this.formatValue(this.type.hour, i % 12)
 525 |           value = `${value}${i < 12 ? 'a' : 'p'}`
 526 |           result.push(value)
 527 |         } else {
 528 |           if (this.type.hour === 'k' || this.type.hour === 'kk') {
 529 |             result.push(this.formatValue(this.type.hour, i + 1))
 530 |           } else {
 531 |             result.push(this.formatValue(this.type.hour, i))
 532 |           }
 533 |         }
 534 |       }
 535 |       return result
 536 |     },
 537 | 
 538 |     genMinuteRangeList () {
 539 |       const result = []
 540 |       const step = +this.interval.minute
 541 |       for (let i = 0; i <= 59; i += step) {
 542 |         result.push(this.formatValue(this.type.minute, i))
 543 |       }
 544 |       return result
 545 |     },
 546 | 
 547 |     genSecondRangeList () {
 548 |       const result = []
 549 |       const step = +this.interval.second
 550 |       for (let i = 0; i <= 59; i += step) {
 551 |         result.push(this.formatValue(this.type.second, i))
 552 |       }
 553 |       return result
 554 |     },
 555 | 
 556 |     openRangePanel (section) {
 557 |       if (!section) { return }
 558 | 
 559 |       this.rangeTitle = `Choose ${section}-range Values`
 560 |       this.editingRange = section
 561 | 
 562 |       if (section === 'minute') {
 563 |         this.rangeList = this.genMinuteRangeList()
 564 |         this.selectedRanges = [].concat([], this.minuteRange)
 565 |       } else if (section === 'second') {
 566 |         this.rangeList = this.genSecondRangeList()
 567 |         this.selectedRanges = [].concat([], this.secondRange)
 568 |       } else if (section === 'hour') {
 569 |         this.rangeList = this.genHourRangeList()
 570 |         this.selectedRanges = [].concat([], this.hourRange)
 571 |       }
 572 | 
 573 |       this.showRangePanel = true
 574 |     },
 575 | 
 576 |     confirmRange () {
 577 |       if (this.editingRange === 'minute') {
 578 |         this.minuteRange = [].concat([], this.selectedRanges || [])
 579 |       } else if (this.editingRange === 'second') {
 580 |         this.secondRange = [].concat([], this.selectedRanges || [])
 581 |       } else if (this.editingRange === 'hour') {
 582 |         this.hourRange = [].concat([], this.selectedRanges || [])
 583 |       }
 584 |       this.$nextTick(() => {
 585 |         this.closeRangePanel()
 586 |       })
 587 |     },
 588 | 
 589 |     closeRangePanel () {
 590 |       this.rangeTitle = ''
 591 |       this.editingRange = ''
 592 |       this.rangeList = undefined
 593 |       this.selectedRanges = []
 594 |       this.showRangePanel = false
 595 |     },
 596 | 
 597 |     selectAllRangeItems () {
 598 |       this.selectedRanges = [].concat([], this.rangeList || [])
 599 |     },
 600 | 
 601 |     unselectAllRangeItems () {
 602 |       this.selectedRanges = []
 603 |     },
 604 | 
 605 |     toggleBlurDelay () {
 606 |       this.blurDelay = 300
 607 |     },
 608 | 
 609 |     toggleManualInputTimeout () {
 610 |       this.manualInputTimeout = 1000
 611 |     }
 612 |   },
 613 | 
 614 |   mounted () {
 615 |     window.addEventListener('scroll', this.scrollHandler)
 616 | 
 617 |     this.$nextTick(() => {
 618 |       this.updateHourRange()
 619 |       this.updatePlaygroundData()
 620 |     })
 621 |   },
 622 | 
 623 |   beforeDestroy () {
 624 |     window.removeEventListener('scroll', this.scrollHandler)
 625 |   }
 626 | }
 627 | </script>
 628 | 
 629 | <template lang="pug">
 630 | section#playground
 631 |   main
 632 |     h2.section-title Timepicker Playground
 633 | 
 634 |     #configPanel
 635 |       #typesSelection.config-block
 636 |         h3.subtitle
 637 |           a.anchor #
 638 |           | Generate&nbsp;
 639 |           code format
 640 |           | &nbsp;string
 641 |         config-row(label="Hour:")
 642 |           label.options(v-for="(htype, index) in tokens.hour", :key="index", :for="'hour_type' + index" @mouseup.stop="updateHourRange(htype)")
 643 |             input(v-model="type.hour", :value="htype", :id="'hour_type' + index" type="radio" name="hour_type")
 644 |             | &nbsp;{{ htype }}
 645 |         config-row(label="Minute:")
 646 |           label.options(v-for="(mtype, index) in tokens.minute", :key="index", :for="'minute_type' + index")
 647 |             input(v-model="type.minute", :value="mtype", :id="'minute_type' + index" type="radio" name="minute_type")
 648 |             | &nbsp;{{ mtype }}
 649 |         config-row(label="Second:")
 650 |           label.options(v-for="(stype, index) in tokens.second", :key="index", :for="'second_type' + index")
 651 |             input(v-model="type.second", :value="stype", :id="'second_type' + index" type="radio" name="second_type")
 652 |             | &nbsp;{{ stype }}
 653 |         config-row(v-if="needApm" label="AM/PM:")
 654 |           label.options(v-for="(atype, index) in tokens.apm", :key="index", :for="'apm_type' + index")
 655 |             input(v-model="type.apm", :value="atype", :id="'apm_type' + index" type="radio" name="apm_type")
 656 |             | &nbsp;{{ atype }}
 657 | 
 658 |       #valuesSelection.config-block
 659 |         h3.subtitle
 660 |           a.anchor #
 661 |           | Set&nbsp;
 662 |           code v-model
 663 |           | &nbsp;data
 664 |         config-row(label="Hour:")
 665 |           label.range-wrapper
 666 |             input(v-model="selected.hour" type="range", :min="hourBoundary.min", :max="hourBoundary.max" step="1")
 667 |             span(v-text="selected.hour")
 668 |         config-row(label="Minute:")
 669 |           label.range-wrapper
 670 |             input(v-model="selected.minute" type="range" min="0" max="59", :step="interval.minute")
 671 |             span(v-text="selected.minute")
 672 |         config-row(v-if="showSeconds" label="Second:")
 673 |           label.range-wrapper
 674 |             input(v-model="selected.second" type="range" min="0" max="59", :step="interval.second")
 675 |             span(v-text="selected.second")
 676 |         config-row(v-if="needApm" label="AM/PM:", :class="{'capitailized': type.apm === 'A'}")
 677 |           label.options(for="selected_apm_am")
 678 |             input(v-model="selected.apm" type="radio" id="selected_apm_am" name="selected_apm" value="am")
 679 |             | &nbsp;am
 680 |           label.options(for="selected_apm_pm")
 681 |             input(v-model="selected.apm" type="radio" id="selected_apm_pm" name="selected_apm" value="pm")
 682 |             | &nbsp;pm
 683 | 
 684 |       .codes
 685 |         highlight-code(lang="javascript" data-title="v-model value") {{ yourTimeValue }}
 686 | 
 687 |       #intervalSelection.config-block
 688 |         h3.subtitle
 689 |           a.anchor #
 690 |           | Customized Intervals
 691 |         config-row(is-group)
 692 |           label.options
 693 |             input(v-model="customInterval.minute" type="checkbox")
 694 |             | &nbsp;Set Minute Interval
 695 |           label.range-wrapper(v-if="customInterval.minute")
 696 |             input(v-model.number="interval.minute" type="range" min="0" max="60" step="1")
 697 |             span(v-text="interval.minute")
 698 |         config-row(is-group v-if="showSeconds")
 699 |           label.options
 700 |             input(v-model="customInterval.second" type="checkbox")
 701 |             | &nbsp;Set Second Interval
 702 |           label.range-wrapper(v-if="customInterval.second")
 703 |             input(v-model.number="interval.second" type="range" min="0" max="60" step="1")
 704 |             span(v-text="interval.second")
 705 | 
 706 |       #customRanges.config-block
 707 |         h3.subtitle
 708 |           a.anchor #
 709 |           | Customized Ranges
 710 |         config-row(is-group)
 711 |           label.options
 712 |             input(v-model="customRange.hour" type="checkbox")
 713 |             | &nbsp;Set Hour Range
 714 |           .button-wrapper(v-if="customRange.hour" )
 715 |             button.common.size-small(@click="openRangePanel('hour')") Config
 716 |             span.item-count {{ hourRange.length }} value{{hourRange.length > 1 ? 's' : ''}} selected
 717 |         config-row(is-group)
 718 |           label.options
 719 |             input(v-model="customRange.minute" type="checkbox")
 720 |             | &nbsp;Set Minute Range
 721 |           .button-wrapper(v-if="customRange.minute" )
 722 |             button.common.size-small(@click="openRangePanel('minute')") Config
 723 |             span.item-count {{ minuteRange.length }} value{{minuteRange.length > 1 ? 's' : ''}} selected
 724 |         config-row(is-group v-if="showSeconds")
 725 |           label.options
 726 |             input(v-model="customRange.second" type="checkbox")
 727 |             | &nbsp;Set Second Range
 728 |           .button-wrapper(v-if="customRange.second" )
 729 |             button.common.size-small(@click="openRangePanel('second')") Config
 730 |             span.item-count {{ secondRange.length }} value{{secondRange.length > 1 ? 's' : ''}} selected
 731 | 
 732 |       #closeOnComplete.config-block
 733 |         h3.subtitle
 734 |           a.anchor #
 735 |           | Close on Complete
 736 |         config-row(is-group)
 737 |           label.options(for="close_on_complete_true")
 738 |             input(v-model="closeOnComplete" type="radio" id="close_on_complete_true" name="close_on_complete", :value="true")
 739 |             | &nbsp;Enable
 740 |           label.options(for="close_on_complete_false")
 741 |             input(v-model="closeOnComplete" type="radio" id="close_on_complete_false" name="close_on_complete", :value="false")
 742 |             | &nbsp;Disable
 743 | 
 744 |       #clearButton.config-block
 745 |         h3.subtitle
 746 |           a.anchor #
 747 |           | Clear Button
 748 |         config-row(is-group)
 749 |           label.options(for="hide_clear_btn_false")
 750 |             input(v-model="hideClearBtn" type="radio" id="hide_clear_btn_false" name="hide_clear_btn", :value="false")
 751 |             | &nbsp;Enable
 752 |           label.options(for="hide_clear_btn_true")
 753 |             input(v-model="hideClearBtn" type="radio" id="hide_clear_btn_true" name="hide_clear_btn", :value="true")
 754 |             | &nbsp;Disable
 755 | 
 756 |       #disablePicker.config-block
 757 |         h3.subtitle
 758 |           a.anchor #
 759 |           | Disable Picker
 760 |         config-row(is-group)
 761 |           label.options
 762 |             input(v-model="disablePicker" type="checkbox")
 763 |             | &nbsp;Disable
 764 | 
 765 |       #lazyMode.config-block
 766 |         h3.subtitle
 767 |           a.anchor #
 768 |           | Lazy Event Mode
 769 |         config-row(is-group)
 770 |           label.options(for="lazy_mode_true")
 771 |             input(v-model="lazyMode" type="radio" id="lazy_mode_true" name="lazy_mode", :value="true")
 772 |             | &nbsp;Enable
 773 |           label.options(for="lazy_mode_false")
 774 |             input(v-model="lazyMode" type="radio" id="lazy_mode_false" name="lazy_mode", :value="false")
 775 |             | &nbsp;Disable
 776 | 
 777 |       #autoScroll.config-block
 778 |         h3.subtitle
 779 |           a.anchor #
 780 |           | Auto Scroll
 781 |         config-row(is-group)
 782 |           label.options(for="auto_scroll_true")
 783 |             input(v-model="autoScroll" type="radio" id="auto_scroll_true" name="auto_scroll", :value="true")
 784 |             | &nbsp;Enable
 785 |           label.options(for="auto_scroll_false")
 786 |             input(v-model="autoScroll" type="radio" id="auto_scroll_false" name="auto_scroll", :value="false")
 787 |             | &nbsp;Disable
 788 | 
 789 |       #manualInput.config-block
 790 |         h3.subtitle
 791 |           a.anchor #
 792 |           | Manually Input Support
 793 |         config-row(is-group)
 794 |           label.options(for="manual_input_true")
 795 |             input(v-model="manualInput" type="radio" id="manual_input_true" name="manual_input", :value="true")
 796 |             | &nbsp;Enable
 797 |           label.options(for="manual_input_false")
 798 |             input(v-model="manualInput" type="radio" id="manual_input_false" name="manual_input", :value="false")
 799 |             | &nbsp;Disable
 800 | 
 801 |       #hideDropdown.config-block(v-if="manualInput")
 802 |         h3.subtitle
 803 |           a.anchor #
 804 |           | Hide Dropdown
 805 |         config-row(is-group)
 806 |           label.options(for="hide_dropdown_true")
 807 |             input(v-model="hideDropdown" type="radio" id="hide_dropdown_true" name="hide_dropdown", :value="true")
 808 |             | &nbsp;Enable
 809 |           label.options(for="hide_dropdown_false")
 810 |             input(v-model="hideDropdown" type="radio" id="hide_dropdown_false" name="hide_dropdown", :value="false")
 811 |             | &nbsp;Disable
 812 | 
 813 |       #manualInputTimeout.config-block(v-if="manualInput")
 814 |         h3.subtitle
 815 |           a.anchor #
 816 |           | Customized Manual Input Timeout
 817 |         config-row(is-group)
 818 |           label.options
 819 |             input(v-model="customManualInputTimeout" type="checkbox" @input="toggleManualInputTimeout")
 820 |             | &nbsp;Set Manual Input Timeout
 821 |           label.range-wrapper(v-if="customManualInputTimeout")
 822 |             input(v-model.number="manualInputTimeout" type="range" min="50" max="5000" step="50")
 823 |             span(v-text="manualInputTimeout")
 824 | 
 825 |       #advancedKeyboard.config-block
 826 |         h3.subtitle
 827 |           a.anchor #
 828 |           | Advanced Keyboard Support
 829 |         config-row(is-group)
 830 |           label.options(for="advanced_kb_true")
 831 |             input(v-model="advancedKeyboard" type="radio" id="advanced_kb_true" name="advanced_kb", :value="true")
 832 |             | &nbsp;Enable
 833 |           label.options(for="advanced_kb_false")
 834 |             input(v-model="advancedKeyboard" type="radio" id="advanced_kb_false" name="advanced_kb", :value="false")
 835 |             | &nbsp;Disable
 836 | 
 837 |       #blurDelay.config-block
 838 |         h3.subtitle
 839 |           a.anchor #
 840 |           | Customized Blur Delay
 841 |         config-row(is-group)
 842 |           label.options
 843 |             input(v-model="customBlurDelay" type="checkbox" @input="toggleBlurDelay")
 844 |             | &nbsp;Set Blur Delay
 845 |           label.range-wrapper(v-if="customBlurDelay")
 846 |             input(v-model.number="blurDelay" type="range" min="50" max="1500" step="50")
 847 |             span(v-text="blurDelay")
 848 | 
 849 |       #fixedDropdownBtn.config-block
 850 |         h3.subtitle
 851 |           a.anchor #
 852 |           | Fixed Dropdown Button
 853 |         config-row(is-group)
 854 |           label.options(for="fixed_dd_btn_true")
 855 |             input(v-model="fixedDropdownBtn" type="radio" id="fixed_dd_btn_true" name="fixed_dd_btn", :value="true")
 856 |             | &nbsp;Enable
 857 |           label.options(for="fixed_dd_btn_false")
 858 |             input(v-model="fixedDropdownBtn" type="radio" id="fixed_dd_btn_false" name="fixed_dd_btn", :value="false")
 859 |             | &nbsp;Disable
 860 | 
 861 |       #skipErrorStyle.config-block
 862 |         h3.subtitle
 863 |           a.anchor #
 864 |           | Skip Error Style
 865 |         config-row(is-group)
 866 |           label.options(for="skip_error_true")
 867 |             input(v-model="skipErrorStyle" type="radio" id="skip_error_true" name="skip_error", :value="true")
 868 |             | &nbsp;Enable
 869 |           label.options(for="skip_error_false")
 870 |             input(v-model="skipErrorStyle" type="radio" id="skip_error_false" name="skip_error", :value="false")
 871 |             | &nbsp;Disable
 872 | 
 873 |       #appendToBody.config-block
 874 |         h3.subtitle
 875 |           a.anchor #
 876 |           | Append To Body
 877 |         config-row(is-group)
 878 |           label.options(for="append_to_body_true")
 879 |             input(v-model="appendToBody" type="radio" id="append_to_body_true" name="append_to_body", :value="true")
 880 |             | &nbsp;Enable
 881 |           label.options(for="append_to_body_false")
 882 |             input(v-model="appendToBody" type="radio" id="append_to_body_false" name="append_to_body", :value="false")
 883 |             | &nbsp;Disable
 884 | 
 885 |       #debugMode.config-block
 886 |         h3.subtitle
 887 |           a.anchor #
 888 |           | Debug Mode
 889 |         config-row(is-group)
 890 |           label.options(for="debug_mode_true")
 891 |             input(v-model="debugMode" type="radio" id="debug_mode_true" name="debug_mode", :value="true")
 892 |             | &nbsp;Enable
 893 |           label.options(for="debug_mode_false")
 894 |             input(v-model="debugMode" type="radio" id="debug_mode_false" name="debug_mode", :value="false")
 895 |             | &nbsp;Disable
 896 | 
 897 |   //-
 898 |   //- Live preview on the left panel
 899 |   //-
 900 |   aside.previews(:style="asideStyle")
 901 |     #playgroundPreview.preview
 902 |       label(for="vueTimepickerInPlayground")
 903 |         b Format string:&nbsp;
 904 |         span(v-text="formatString")
 905 |       p
 906 |         vue-timepicker(v-model="playgroundData"
 907 |                        id="vueTimepickerInPlayground"
 908 |                        :format="formatString"
 909 |                        :minute-interval="interval.minute"
 910 |                        :second-interval="showSeconds ? interval.second : null"
 911 |                        :hour-range="customRange.hour ? hourRange : null"
 912 |                        :minute-range="customRange.minute ? minuteRange : null"
 913 |                        :second-range="(showSeconds && customRange.second) ? secondRange : null"
 914 |                        :close-on-complete="closeOnComplete"
 915 |                        :advanced-keyboard="advancedKeyboard"
 916 |                        :manual-input="manualInput"
 917 |                        :hide-dropdown="toHideDropdown"
 918 |                        :blur-delay="blurDelay"
 919 |                        :manual-input-timeout="manualInputTimeout"
 920 |                        :hide-clear-button="hideClearBtn"
 921 |                        :fixed-dropdown-button="fixedDropdownBtn"
 922 |                        :disabled="disablePicker"
 923 |                        :lazy="lazyMode"
 924 |                        :auto-scroll="autoScroll"
 925 |                        :append-to-body="appendToBody"
 926 |                        :debug-mode="debugMode"
 927 |                        :input-class="skipErrorStyle ? 'skip-error-style' : null"
 928 |                        @change="changeHandler"
 929 |                        @error="errorHandler")
 930 | 
 931 |     #htmlCodePreview.codes
 932 |       highlight-code(lang="html" data-title="HTML") {{ htmlCodeWithVar }}
 933 | 
 934 |     #dispatchedValue.codes
 935 |       highlight-code(lang="json" data-title="@change event data") {{ playgroundFullValue }}
 936 |       highlight-code(v-if="showErroredData" lang="json" data-title="@error event data") {{ playgroundErroredData }}
 937 | 
 938 |   //-
 939 |   //- Customized Range Panels
 940 |   //-
 941 |   overlay-panel(v-if="showRangePanel" :title="rangeTitle" @close="closeRangePanel")
 942 |     template(v-slot:footerLeft)
 943 |       button.secondary(@click="selectAllRangeItems") Select All
 944 |       button.secondary(@click="unselectAllRangeItems") Unselect All
 945 |     template(v-slot:footerRight)
 946 |       button(@click="confirmRange") Confirm
 947 | 
 948 |     .valid-items
 949 |       label.range-item(v-for="(rangeItem, rIndex) in rangeList")
 950 |         input(type="checkbox" name="selected_ranges" v-model="selectedRanges" :value="rangeItem")
 951 |         | {{ rangeItem }}
 952 | 
 953 |     .invalid-items(v-if="filteredOutValues && filteredOutValues.length")
 954 |       b Values selected but filtered out by the&nbsp;
 955 |         template(v-if="editingRange !== 'hour'") {{editingRange}}-interval:
 956 |         template(v-else) current hour type
 957 |       .items-list
 958 |         span.invalid-range(v-for="oItem in filteredOutValues" :key="oItem" v-text="oItem")
 959 | 
 960 | </template>
 961 | 
 962 | <style lang="stylus">
 963 | @import '../assets/_variables.styl'
 964 | 
 965 | section#playground
 966 |   main
 967 |     padding-left: 420px
 968 |     .codes
 969 |       pre,
 970 |       code
 971 |         overflow-x: auto
 972 | 
 973 |   .config-block
 974 |     .subtitle
 975 |       margin: 0
 976 |       padding: 1em 0 0.5em 0
 977 |       position: relative
 978 | 
 979 |       a.anchor
 980 |         position: absolute
 981 |         left: -1em
 982 | 
 983 |     &:first-of-type
 984 |       .subtitle
 985 |         padding-top: 0
 986 | 
 987 |     .button-wrapper
 988 |       display: flex
 989 |       flex-flow: row wrap
 990 |       justify-content: flex-start
 991 |       align-items: center
 992 |       padding: 0.3em 0.5em
 993 |       border-radius: 4px
 994 |       background: -black(0.05)
 995 | 
 996 |   aside.previews
 997 |     position: fixed
 998 |     width: 320px
 999 |     left:10%
1000 |     top: 0
1001 |     z-index: 10
1002 |     padding-top: 220px
1003 | 
1004 |   #playgroundPreview
1005 |     box-sizing: border-box
1006 |     background: #fff
1007 |     padding: 1em 1.5em
1008 | 
1009 |   .range-item,
1010 |   .invalid-range
1011 |     display: inline-block
1012 |     margin-right: 1em
1013 |     margin-bottom: 0.5em
1014 |   
1015 |   .range-item
1016 |     min-width: 3em
1017 | 
1018 |   .invalid-range
1019 |     opacity: 0.7
1020 | 
1021 |   .invalid-items
1022 |     margin-top: 1em
1023 |     padding: 0.8em 0.8em 0.3em 0.8em
1024 |     background: -black(0.05)
1025 |     border-radius: 6px
1026 | 
1027 |     .items-list
1028 |       padding-top: 0.8em
1029 | 
1030 |   .item-count
1031 |     font-size: 0.85em
1032 |     padding-left: 0.5em
1033 |     opacity: 0.7
1034 | </style>
1035 | 


--------------------------------------------------------------------------------
/demo/src/components/SampleBlock.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'SampleBlock',
 4 |   props: {
 5 |     id: { type: String }
 6 |   },
 7 |   computed: {
 8 |     blockHerf () {
 9 |       if (this.id && this.id.length) {
10 |         return `#${this.id}`
11 |       }
12 |       return null
13 |     }
14 |   }
15 | }
16 | </script>
17 | 
18 | <template lang="pug">
19 | .sample-block(:id="id")
20 |   h3.title
21 |     a.anchor(:href="blockHerf") #
22 |     slot(name="title")
23 |   .description
24 |     slot(name="description")
25 |   .codes
26 |     slot(name="codes")
27 |   .preview
28 |     slot(name="preview")
29 |   .codes(v-if="$slots.data")
30 |     slot(name="data")
31 | </template>
32 | 
33 | <style lang="stylus">
34 | .sample-block
35 |   padding: 5em 0 0 20%
36 |   &:first-of-type
37 |     padding-top: 0
38 | 
39 |   .title
40 |     position: relative
41 |     margin-bottom: 1.5em
42 | 
43 |     a.anchor
44 |       position: absolute
45 |       left: -1em
46 | 
47 |   .description,
48 |   .preview,
49 |   .codes
50 |     margin-left: 1.5em
51 | 
52 |   .inline-data-preview
53 |     display: inline-block
54 |     margin-left: 1em
55 |     font-size: 0.9em
56 |   
57 |   ul
58 |     margin: 0 0 1em 0
59 |     padding: 0 0 0 1.2em
60 |     li
61 |       list-style: circle
62 |       line-height: 150%
63 | </style>
64 | 


--------------------------------------------------------------------------------
/demo/src/components/Samples.vue:
--------------------------------------------------------------------------------
   1 | <script>
   2 | import VueTimepicker from '../../../src/vue-timepicker'
   3 | import SampleBlock from './SampleBlock'
   4 | 
   5 | export default {
   6 |   name: 'Samples',
   7 |   components: {
   8 |     VueTimepicker,
   9 |     SampleBlock
  10 |   },
  11 |   data () {
  12 |     return {
  13 |       yourData: {
  14 |         hh: '03',
  15 |         mm: '05',
  16 |         ss: '00',
  17 |         a: 'am'
  18 |       },
  19 |       yourFormat: 'hh:mm:ss a',
  20 |       yourDaysArray: [
  21 |         {start_time: {HH: '08', mm: '00'}, end_time: {HH: '09', mm: '00'}},
  22 |         {start_time: {HH: '15', mm: '00'}, end_time: {HH: '', mm: ''}},
  23 |         {start_time: {HH: '', mm: ''}, end_time: {HH: '13', mm: '30'}},
  24 |         {start_time: {HH: '', mm: ''}, end_time: {HH: '', mm: ''}}
  25 |       ],
  26 | 
  27 |       simpleStringValue: '02:30',
  28 |       yourStringValue: '3:mm:05 A',
  29 |       unsetStringValue: '',
  30 | 
  31 |       muteFlowListener: true,
  32 |       latestDataFlow: undefined,
  33 |       demoData1: {HH: '08', mm: '30'},
  34 |       demoData2: {HH: '10', mm: '45'},
  35 |       demoArgs: undefined,
  36 | 
  37 |       dropdownStatus: 'closed',
  38 |       
  39 |       focusState: 'blurred',
  40 |       dropdownState: 'closed',
  41 | 
  42 |       lazyData: {
  43 |         hh: '06',
  44 |         mm: '50',
  45 |         ss: '00',
  46 |         a: 'am'
  47 |       },
  48 |       lazyChangeData: undefined,
  49 |       lazyInputData: undefined,
  50 |       lazyEventTs: undefined,
  51 | 
  52 |       manualStringValue: '8:15 pm',
  53 | 
  54 |       customCloseBtnValue: '10:05',
  55 | 
  56 |       autoScrollData1: '08:40',
  57 |       autoScrollData2: '5:30:20 pm',
  58 | 
  59 |       apmFirst1: 'AM 03:15',
  60 |       apmFirst2: 'pm9時6分',
  61 | 
  62 |       sideNav: [
  63 |         { title: 'Default', anchor: 'default' },
  64 |         { title: '12 Hours', anchor: 'format12hours' },
  65 |         { title: 'Seconds Picker', anchor: 'seconds' },
  66 |         { title: 'Customized Interval', anchor: 'interval' },
  67 |         { title: 'Using v-model', anchor: 'vModel' },
  68 |         { title: 'v-model with String Value', anchor: 'vModelWithString' },
  69 |         { title: 'Work with v-for', anchor: 'vForSample' },
  70 |         { title: 'Hour Range', anchor: 'hourRange' },
  71 |         { title: 'Minute and Second Range', anchor: 'minuteAndSecondRange' },
  72 |         { title: 'Hide Disabled Items', anchor: 'hideDisabledItems' },
  73 |         { title: 'Close on Complete', anchor: 'closeOnComplete' },
  74 |         { title: 'Hide Clear Button', anchor: 'hideClearButton' },
  75 |         { title: 'Disable Picker', anchor: 'disablePicker' },
  76 |         { title: 'The @change Event', anchor: 'onChangeSample' },
  77 |         { title: 'Lazy Event Mode', anchor: 'lazyEvents' },
  78 |         { title: 'Keyboard Support', anchor: 'kbSupport' },
  79 |         { title: 'Manual Input', anchor: 'manualInput'},
  80 |         { title: '@open and @close event', anchor: 'openAndClose' },
  81 |         { title: '@focus and @blur event', anchor: 'focusAndBlur' },
  82 |         { title: 'Customized Picker Labels', anchor: 'customPickerLabels' },
  83 |         { title: 'Adjust Input Width', anchor: 'inputWidth' },
  84 |         { title: 'Auto-Scroll', anchor: 'autoScroll' },
  85 |         { title: 'More Powerful format String', anchor: 'morePowerfulFormat' },
  86 |         { title: 'Customized Buttons And Icon', anchor: 'customButtonIcon' },
  87 |         { title: 'Fixed Dropdown Button', anchor: 'fixedDropdownButton' },
  88 |         { title: 'Drop Direction', anchor: 'dropDirection' }
  89 |       ]
  90 |     }
  91 |   },
  92 | 
  93 |   methods: {
  94 |     changeHandler (eventData) {
  95 |       if (this.muteFlowListener) { return }
  96 |       this.latestDataFlow = eventData
  97 |       this.demoArgs = undefined
  98 |     },
  99 | 
 100 |     otherChangeHandler (eventData, arg1, arg2) {
 101 |       if (this.muteFlowListener) { return }
 102 |       this.latestDataFlow = eventData
 103 |       this.demoArgs = {
 104 |         arg1: arg1,
 105 |         arg2: arg2
 106 |       }
 107 |     },
 108 | 
 109 |     lazyChangeHandler (eventData) {
 110 |       this.lazyChangeData = eventData
 111 |       this.lazyEventTs = new Date().toLocaleString()
 112 |     },
 113 | 
 114 |     lazyInputHandler (eventData) {
 115 |       this.lazyInputData = eventData
 116 |     }
 117 |   },
 118 | 
 119 |   mounted () {
 120 |     window.setTimeout(() => {
 121 |       this.muteFlowListener = false
 122 |     }, 1000)
 123 |   }
 124 | }
 125 | </script>
 126 | 
 127 | <template lang="pug">
 128 | section#mostlyUsedSamples
 129 |   h2.section-title Common Usage
 130 | 
 131 |   //- Default
 132 |   sample-block#default
 133 |     template(v-slot:title) Default
 134 |     p(slot="description")
 135 |       | Default to 24-hour format
 136 |       code HH:mm
 137 |     template(v-slot:codes)
 138 |       highlight-code(lang="html" data-title="HTML")
 139 |         | &lt;vue-timepicker&gt;&lt;/vue-timepicker&gt;
 140 |     template(v-slot:preview)
 141 |       vue-timepicker
 142 | 
 143 |   //- 12 Hours
 144 |   sample-block#format12hours
 145 |     template(v-slot:title) 12 Hours
 146 |     p(slot="description")
 147 |       | By properly define the
 148 |       code format
 149 |       | string, you can set timepicker in form of 12 hours
 150 |     template(v-slot:codes)
 151 |       highlight-code(lang="html" data-title="HTML")
 152 |         pre
 153 |           | &lt;!-- 12-hour sample 1 --&gt;
 154 |           | &lt;vue-timepicker format="hh:mm A"&gt;&lt;/vue-timepicker&gt;
 155 |           | &nbsp;
 156 |           | &lt;!-- 12-hour sample 2 --&gt;
 157 |           | &lt;vue-timepicker format="h:m a"&gt;&lt;/vue-timepicker&gt;
 158 |     template(v-slot:preview)
 159 |       b 12-hour sample 1
 160 |       p
 161 |         vue-timepicker(format="hh:mm A")
 162 |       b 12-hour sample 2
 163 |       p
 164 |         vue-timepicker(format="h:m a")
 165 | 
 166 |   //- Seconds Picker
 167 |   sample-block#seconds
 168 |     template(v-slot:title) Seconds Picker
 169 |     p(slot="description")
 170 |       | You can trigger the seconds picker by adding
 171 |       code ss
 172 |       | or
 173 |       code s
 174 |       | in your format string.
 175 |     template(v-slot:codes)
 176 |       highlight-code(lang="html" data-title="HTML")
 177 |         | &lt;vue-timepicker format="HH:mm:ss"&gt;&lt;/vue-timepicker&gt;
 178 |     template(v-slot:preview)
 179 |       vue-timepicker(format="HH:mm:ss")
 180 | 
 181 |   //- Customized Interval
 182 |   sample-block#interval
 183 |     template(v-slot:title) Customized Interval
 184 |     p(slot="description")
 185 |       | Timepicker also allows you to display minutes or seconds picker with certain interval, like a 10-minute interval
 186 |       code 0, 10, 20, ... 50, 60
 187 |       | for example
 188 |     template(v-slot:codes)
 189 |       highlight-code(lang="html" data-title="HTML")
 190 |         pre
 191 |           | &lt;!-- 10-minute interval --&gt;
 192 |           | &lt;vue-timepicker :minute-interval="10"&gt;&lt;/vue-timepicker&gt;
 193 |           | &nbsp;
 194 |           | &lt;!-- 15-second interval --&gt;
 195 |           | &lt;vue-timepicker format="HH:mm:ss" :second-interval="15"&gt;&lt;/vue-timepicker&gt;
 196 |           | &nbsp;
 197 |           | &lt;!-- 5-minute interval plus 10-second interval --&gt;
 198 |           | &lt;vue-timepicker format="hh:mm:ss" :minute-interval="5" :second-interval="10"&gt;&lt;/vue-timepicker&gt;
 199 |     template(v-slot:preview)
 200 |       b 10-minute interval
 201 |       p
 202 |         vue-timepicker(:minute-interval="10")
 203 |       b 15-second interval
 204 |       p
 205 |         vue-timepicker(format="HH:mm:ss" :second-interval="15")
 206 |       b 5-minute interval plus 10-second interval
 207 |       p
 208 |         vue-timepicker(format="hh:mm:ss" :minute-interval="5" :second-interval="10")
 209 | 
 210 |   //- Using v-model
 211 |   sample-block#vModel
 212 |     template(v-slot:title)
 213 |       | Using&nbsp;
 214 |       code v-model
 215 |     p(slot="description")
 216 |       | Timepicker takes <code>v-model</code> value in object format by default.
 217 |     template(v-slot:codes)
 218 |       highlight-code(lang="javascript" data-title="JS")
 219 |         pre
 220 |           | // Define format and initial data
 221 |           | data () {
 222 |           |   return {
 223 |           |     yourFormat: 'hh:mm:ss a',
 224 |           |     yourData: {
 225 |           |       hh: '03',
 226 |           |       mm: '05',
 227 |           |       ss: '00',
 228 |           |       a: 'am'
 229 |           |     }
 230 |           |   }
 231 |           | }
 232 |       highlight-code(lang="html" data-title="HTML")
 233 |         | &lt;vue-timepicker :format="yourFormat" v-model="yourData"&gt;&lt;/vue-timepicker&gt;
 234 |     template(v-slot:preview)
 235 |       vue-timepicker(:format="yourFormat" v-model="yourData")
 236 |     template(v-slot:data)
 237 |       highlight-code(lang="json" data-title="`yourData` in live (JSON)") {{ yourData }}
 238 | 
 239 |   //- String format `v-model`
 240 |   sample-block#vModelWithString
 241 |     template(v-slot:title)
 242 |       code v-model
 243 |       | &nbsp;with String Value
 244 |     p(slot="description")
 245 |       | From <code>v1.0.0+</code>, timepicker also supports <code>v-model</code> value in string format.
 246 |     template(v-slot:codes)
 247 |       highlight-code(lang="javascript" data-title="JS")
 248 |         pre
 249 |           | // Set initial data in string format
 250 |           | data () {
 251 |           |   return {
 252 |           |     simpleStringValue: '02:30',
 253 |           |
 254 |           |     // paired with format 'h:mm:ss A'
 255 |           |     yourStringValue: '3:mm:05 A',
 256 |           |
 257 |           |     unsetStringValue: ''
 258 |           |   }
 259 |           | }
 260 |       highlight-code(lang="html" data-title="HTML")
 261 |         pre
 262 |           | &lt;!-- default 24-hour sample --&gt;
 263 |           | &lt;vue-timepicker v-model="simpleStringValue"&gt;&lt;/vue-timepicker&gt;
 264 |           |
 265 |           | &lt;!-- 12-hour format with partial value set --&gt;
 266 |           | &lt;vue-timepicker v-model="yourStringValue" format="h:mm:ss A"&gt;&lt;/vue-timepicker&gt;
 267 |           |
 268 |           | &lt;!-- unset/unknown initial value --&gt;
 269 |           | &lt;vue-timepicker v-model="unsetStringValue"&gt;&lt;/vue-timepicker&gt;
 270 |     template(v-slot:preview)
 271 |       b default 24-hour sample
 272 |       p
 273 |         vue-timepicker(v-model="simpleStringValue")
 274 |         span.inline-data-preview
 275 |           | simpleStringValue&nbsp;
 276 |           code "{{ simpleStringValue }}"
 277 |       b 12-hour format with partial value set
 278 |       p
 279 |         vue-timepicker(v-model="yourStringValue" format="h:mm:ss A")
 280 |         span.inline-data-preview
 281 |           | yourStringValue:&nbsp;
 282 |           code "{{ yourStringValue }}"
 283 |       b unset/unknown initial value
 284 |       p
 285 |         vue-timepicker(v-model="unsetStringValue")
 286 |         span.inline-data-preview
 287 |           | unsetStringValue:&nbsp;
 288 |           code "{{ unsetStringValue }}"
 289 | 
 290 |   //- v-for Example
 291 |   sample-block#vForSample
 292 |     template(v-slot:title)
 293 |       | Work with&nbsp;
 294 |       code v-for
 295 |     p(slot="description")
 296 |       | Here's a quick sample of
 297 |       code v-for
 298 |       | usage
 299 |     template(v-slot:codes)
 300 |       highlight-code(lang="javascript" data-title="JS")
 301 |         pre
 302 |           | data () {
 303 |           |   return {
 304 |           |     yourDaysArray: [
 305 |           |       {start_time: {HH: '08', mm: '00'}, end_time: {HH: '09', mm: '00'}},
 306 |           |       {start_time: {HH: '15', mm: '00'}, end_time: {HH: '', mm: ''}},
 307 |           |       {start_time: {HH: '', mm: ''}, end_time: {HH: '13', mm: '30'}},
 308 |           |       {start_time: {HH: '', mm: ''}, end_time: {HH: '', mm: ''}}
 309 |           |     ]
 310 |           |   }
 311 |           | }
 312 |       highlight-code(lang="html" data-title="HTML")
 313 |         pre
 314 |           | &lt;p v-for="(day, index) in yourDaysArray"&gt;
 315 |           |   &lt;label&gt;Day <span>{{</span> index + 1 <span>}}</span>: &lt;/label&gt;
 316 |           |   &lt;vue-timepicker v-model="day.start_time" placeholder="Start Time"&gt;&lt;/vue-timepicker&gt;
 317 |           |   &lt;span&gt; to &lt;/span&gt;
 318 |           |   &lt;vue-timepicker v-model="day.end_time" placeholder="End Time"&gt;&lt;/vue-timepicker&gt;
 319 |           | &lt;/p&gt;
 320 |     template(v-slot:preview)
 321 |       p(v-for="(day, index) in yourDaysArray")
 322 |         label Day {{ index + 1 }}:&nbsp;
 323 |         vue-timepicker(v-model="day.start_time" placeholder="Start Time")
 324 |         span &nbsp;to&nbsp;
 325 |         vue-timepicker(v-model="day.end_time" placeholder="End Time")
 326 |     template(v-slot:data)
 327 |       highlight-code(lang="json" data-title="`yourDaysArray` JSON in live") {{ yourDaysArray }}
 328 | 
 329 |   //- Hour Range
 330 |   sample-block#hourRange
 331 |     template(v-slot:title) Hour Range
 332 |     p(slot="description") Define the hour values you want and disable the rest
 333 |     template(v-slot:codes)
 334 |       highlight-code(lang="html" data-title="HTML")
 335 |         pre
 336 |           | &lt;!-- Hour Range Sample 1 --&gt;
 337 |           | &lt;vue-timepicker :hour-range="[5, [8, 12], [14, 17], 19]"&gt;&lt;/vue-timepicker&gt;
 338 |           | &lt;!-- >> Equals to :hour-range="[5, 8, 9, 10, 11, 12, 14, 15, 16, 17, 19]" --&gt;
 339 |           | &nbsp;
 340 |           | &lt;!-- Hour Range Sample 2 (12-hour format) --&gt;
 341 |           | &lt;vue-timepicker :hour-range="['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']" format="hh:mm a"&gt;&lt;/vue-timepicker&gt;
 342 |           | &lt;!-- >> Equals to :hour-range="['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']" --&gt;
 343 |     template(v-slot:preview)
 344 |       b Hour Range Sample 1
 345 |       p
 346 |         vue-timepicker(:hour-range="[5, [8, 12], [14, 17], 19]")
 347 |       b Hour Range Sample 2 (12-hour format)
 348 |       p
 349 |         vue-timepicker(:hour-range="['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']" format="hh:mm a")
 350 | 
 351 |   //- Minute Range
 352 |   sample-block#minuteAndSecondRange
 353 |     template(v-slot:title) Minute and Second Range
 354 |     template(v-slot:description)
 355 |       p Similar to Hour Range, you can set available minute/second values base on your needs.
 356 |     template(v-slot:codes)
 357 |       highlight-code(lang="html" data-title="HTML")
 358 |         pre
 359 |           | &lt;!-- Minute range only --&gt;
 360 |           | &lt;vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]"&gt;&lt;/vue-timepicker&gt;
 361 |           |
 362 |           | &lt;!-- Minute range + 5-minute interval --&gt;
 363 |           | &lt;vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]" :minute-interval="5"&gt;&lt;/vue-timepicker&gt;
 364 |           |
 365 |           | &lt;!-- Second range only --&gt;
 366 |           | &lt;vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]"&gt;&lt;/vue-timepicker&gt;
 367 |           |
 368 |           | &lt;!-- Second range + 10-second interval --&gt;
 369 |           | &lt;vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]" :second-interval="10"&gt;&lt;/vue-timepicker&gt;
 370 |           |
 371 |           | &lt;!-- Minute and Second ranges + 10-minute interval + 5-second interval --&gt;
 372 |           | &lt;vue-timepicker format="HH:mm:ss" :minute-range="[0, 6, [10, 30], 42, 50]" :second-range="[0, 6, [10, 30], 42, 50]" :minute-interval="10" :second-interval="5"&gt;&lt;/vue-timepicker&gt;
 373 |     template(v-slot:preview)
 374 |       b Minute range only
 375 |       p
 376 |         vue-timepicker(:minute-range="[0, 6, [10, 30], 42, 50]")
 377 |       b Minute range + 5-minute interval
 378 |       p
 379 |         vue-timepicker(:minute-range="[0, 6, [10, 30], 42, 50]" :minute-interval="5")
 380 |       b Second range only
 381 |       p
 382 |         vue-timepicker(format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]")
 383 |       b Second range + 10-second interval
 384 |       p
 385 |         vue-timepicker(format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]" :second-interval="10")
 386 |       b Minute and Second ranges + 10-minute interval + 5-second interval
 387 |       p
 388 |         vue-timepicker(format="HH:mm:ss" :minute-range="[0, 6, [10, 30], 42, 50]" :second-range="[0, 6, [10, 30], 42, 50]" :minute-interval="10" :second-interval="5")
 389 | 
 390 |   //- Hide Disabled Items
 391 |   sample-block#hideDisabledItems
 392 |     template(v-slot:title) Hide Disabled Items
 393 |     template(v-slot:description)
 394 |       p Here're four kinds of helper properties to let you hide the values excluded by the <code>hour-range</code>, <code>minute-range</code>, and <code>second-range</code>.
 395 |       ul
 396 |         li
 397 |           b hide-disabled-items
 398 |           | : Hide <b>all</b> disabled items - hour, minute, and seconds.
 399 |         li
 400 |           b hide-disabled-hours
 401 |           | : Hide disabled <b>hour</b> valus only.
 402 |         li
 403 |           b hide-disabled-minutes
 404 |           | : Hide disabled <b>minute</b> values only.
 405 |         li
 406 |           b hide-disabled-seconds
 407 |           | : Hide disabled <b>second</b> values only.
 408 |     template(v-slot:codes)
 409 |       highlight-code(lang="html" data-title="HTML")
 410 |         pre
 411 |           | &lt;!-- hide-disabled-items --&gt;
 412 |           | &lt;vue-timepicker hide-disabled-items format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]"&gt;&lt;/vue-timepicker&gt;
 413 |           |
 414 |           | &lt;!-- hide-disabled-hours --&gt;
 415 |           | &lt;vue-timepicker hide-disabled-hours format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]"&gt;&lt;/vue-timepicker&gt;
 416 |           |
 417 |           | &lt;!-- hide-disabled-minutes --&gt;
 418 |           | &lt;vue-timepicker hide-disabled-minutes format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]"&gt;&lt;/vue-timepicker&gt;
 419 |           |
 420 |           | &lt;!-- hide-disabled-seconds --&gt;
 421 |           | &lt;vue-timepicker hide-disabled-seconds format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]"&gt;&lt;/vue-timepicker&gt;
 422 |     template(v-slot:preview)
 423 |       b hide-disabled-items
 424 |       p
 425 |         vue-timepicker(hide-disabled-items format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]")
 426 |       b hide-disabled-hours
 427 |       p
 428 |         vue-timepicker(hide-disabled-hours format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]")
 429 |       b hide-disabled-minutes
 430 |       p
 431 |         vue-timepicker(hide-disabled-minutes format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]")
 432 |       b hide-disabled-seconds
 433 |       p
 434 |         vue-timepicker(hide-disabled-seconds format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]")
 435 | 
 436 |   //- Close on Complete
 437 |   sample-block#closeOnComplete
 438 |     template(v-slot:title) Close on Complete
 439 |     p(slot="description")
 440 |       | Automatically close the dropdown when user finish selecting <b>all</b> of the required fields.
 441 |     template(v-slot:codes)
 442 |       highlight-code(lang="html" data-title="HTML")
 443 |         pre
 444 |           | &lt;!-- Auto-close on complete --&gt;
 445 |           | &lt;vue-timepicker format="hh:mm A" close-on-complete&gt;&lt;/vue-timepicker&gt;
 446 |           |
 447 |           | &lt;!-- Default - close by clicking anywhere outside of the dropdown --&gt;
 448 |           | &lt;vue-timepicker format="hh:mm A"&gt;&lt;/vue-timepicker&gt;
 449 |     template(v-slot:preview)
 450 |       b Auto-close on complete
 451 |       p
 452 |         vue-timepicker(format="hh:mm A" close-on-complete)
 453 |       b Default - close by clicking anywhere outside of the dropdown
 454 |       p
 455 |         vue-timepicker(format="hh:mm A")
 456 | 
 457 |   //- Hide Clear Button
 458 |   sample-block#hideClearButton
 459 |     template(v-slot:title) Hide Clear Button
 460 |     p(slot="description")
 461 |       | If you don't want to expose the clear button in the UI,
 462 |       code hide-clear-button
 463 |       | property will do the trick.
 464 |     template(v-slot:codes)
 465 |       highlight-code(lang="html" data-title="HTML")
 466 |         | &lt;vue-timepicker hide-clear-button&gt;&lt;/vue-timepicker&gt;
 467 |     template(v-slot:preview)
 468 |       vue-timepicker(hide-clear-button)
 469 | 
 470 | 
 471 |   //- Disable Picker
 472 |   sample-block#disablePicker
 473 |     template(v-slot:title) Disable Picker
 474 |     p(slot="description")
 475 |       | Completely disable the picker.
 476 |     template(v-slot:codes)
 477 |       highlight-code(lang="html" data-title="HTML")
 478 |         | &lt;vue-timepicker disabled&gt;&lt;/vue-timepicker&gt;
 479 |     template(v-slot:preview)
 480 |       vue-timepicker(disabled)
 481 | 
 482 |   //- @change Sample
 483 |   sample-block#onChangeSample
 484 |     template(v-slot:title)
 485 |       | The&nbsp;
 486 |       code change
 487 |       | &nbsp;Event
 488 |     template(v-slot:description)
 489 |       p A <code>change</code> event will be triggered every time the user alters timepicker's value.
 490 |       p Unlike the <code>v-model</code>, which only returns data in your predefined format, <code>change</code> event will return a full package of all supported time tokens.
 491 |       p Started from <code>v0.2.2</code>, a <code>displayTime</code> string value is also included in the return data of <code>change</code> event.
 492 |       p Play around with the two pickers below to see their data changes in live.
 493 |     template(v-slot:codes)
 494 |       highlight-code(lang="html" data-title="HTML")
 495 |         pre
 496 |           | &lt;!-- No argument --&gt;
 497 |           | &lt;vue-timepicker v-model="demoData1" @change="changeHandler"&gt;&lt;/vue-timepicker&gt;
 498 |           | &nbsp;
 499 |           | &lt;!-- Custom argument --&gt;
 500 |           | &lt;vue-timepicker v-model="demoData2" @change="otherChangeHandler($event, 'foo', 42)"&gt;&lt;/vue-timepicker&gt;
 501 |       highlight-code(lang="javascript" data-title="JS")
 502 |         pre
 503 |           | methods: {
 504 |           |   // No argument
 505 |           |   changeHandler (eventData) {
 506 |           |     // eventData -&gt; {data: {HH:..., mm:...}, displayTime: 'HH:mm'}
 507 |           |   },
 508 |           |
 509 |           |   // Customized arguments
 510 |           |   otherChangeHandler (eventData, arg1, arg2) {
 511 |           |     // eventData -&gt; {data: {HH:..., mm:...}, displayTime: 'HH:mm'}
 512 |           |     // arg1 -&gt; 'foo'
 513 |           |     // arg2 -&gt; 42
 514 |           |   }
 515 |           | }
 516 |     template(v-slot:preview)
 517 |       b No argument
 518 |       p
 519 |         vue-timepicker(v-model="demoData1" @change="changeHandler")
 520 |       b With Custom arguments ('foo', 42)
 521 |       p
 522 |         vue-timepicker(v-model="demoData2" @change="otherChangeHandler($event, 'foo', 42)")
 523 |     template(v-if="latestDataFlow || demoArgs" slot="data")
 524 |       highlight-code(v-if="latestDataFlow" lang="json" data-title="The `@change` event data") {{ latestDataFlow }}
 525 |       highlight-code(v-if="demoArgs" lang="json" data-title="Received Custom Arguments") {{ demoArgs }}
 526 |       highlight-code(v-if="latestDataFlow" lang="json" data-title="`v-model` value") {{ demoArgs ? demoData2 : demoData1 }}
 527 | 
 528 |   //- Lazy Event Mode
 529 |   sample-block#lazyEvents
 530 |     template(v-slot:title) Lazy Event Mode
 531 |     template(v-slot:description)
 532 |       p When <code>lazy</code> event mode is toggled on, only an actual user behavior can trigger the <code>input</code> and <code>change</code> events. Which are:
 533 |       ul
 534 |         li The user opened the dropdown and picked a new value
 535 |         li The user clicked the ("x") clear button
 536 |     template(v-slot:codes)
 537 |       highlight-code(lang="html" data-title="HTML")
 538 |         | &lt;vue-timepicker lazy format="hh:mm:ss a"&gt;&lt;/vue-timepicker&gt;
 539 |     template(v-slot:preview)
 540 |       p
 541 |         vue-timepicker(v-model="lazyData" lazy format="hh:mm:ss a" @input="lazyInputHandler" @change="lazyChangeHandler")
 542 |         span.inline-data-preview(v-if="lazyEventTs")
 543 |           b Last <code>change</code> event timestamp:
 544 |           | &nbsp;{{ lazyEventTs }}
 545 | 
 546 |     template(v-slot:data)
 547 |       highlight-code(v-if="lazyInputData" lang="json" data-title="The lazy `input` event data") {{ lazyInputData }}
 548 |       highlight-code(v-if="lazyChangeData" lang="json" data-title="The lazy `change` event data") {{ lazyChangeData }}
 549 | 
 550 |   //- Keyboard Support
 551 |   sample-block#kbSupport
 552 |     template(v-slot:title) Keyboard Support
 553 |     template(v-slot:description)
 554 |       p
 555 |         b Basic Keyboard Support:
 556 |       ul
 557 |         li
 558 |           b Tab
 559 |           | : Focus or blur the Timepicker
 560 |         li
 561 |           b Esc
 562 |           | : Close the dropdown
 563 |       p
 564 |         b Advance Keyboard Support:
 565 |       ul
 566 |         li
 567 |           b Arrow Keys
 568 |           | : Navigate between valid (non-disabled) values and columns
 569 |         li
 570 |           b Space
 571 |           | &nbsp;or&nbsp;
 572 |           b Enter
 573 |           | : Select the focusing item
 574 |       p Try tabbing through the following inputs to see the difference between the <b>Default Timepicker</b> and the <b>Timepicker with Advanced Keyboard support</b>.
 575 | 
 576 |     template(v-slot:codes)
 577 |       highlight-code(lang="html" data-title="HTML")
 578 |         pre
 579 |           | &lt;label for="otherInput"&gt;Text Input&lt;label/&gt;
 580 |           | &lt;input id="otherInput" type="text" placeholder="Text" /&gt;
 581 |           |
 582 |           | &lt;!-- Default, with minimal keyboard support --&gt;
 583 |           | &lt;label for="simplePicker"&gt;Default Vue Timepicker&lt;label/&gt;
 584 |           | &lt;vue-timepicker id="simplePicker"&gt;&lt;/vue-timepicker&gt;
 585 |           |
 586 |           | &lt;label for="moreInput"&gt;Number Input&lt;label/&gt;
 587 |           | &lt;input id="moreInput" type="number" placeholder="Number" /&gt;
 588 |           |
 589 |           | &lt;!-- Advanced Keyboard Support Enabled --&gt;
 590 |           | &lt;label for="pickerKB"&gt;Vue Timepicker with Advanced Keyboard support&lt;label/&gt;
 591 |           | &lt;vue-timepicker advanced-keyboard format="h:mm:ss A" :hour-range="[['7a', '5p']]" id="pickerKB"&gt;&lt;/vue-timepicker&gt;
 592 |           |
 593 |           | &lt;label for="oneMoreInput"&gt;One More Text Input&lt;label/&gt;
 594 |           | &lt;input id="oneMoreInput" type="text" placeholder="More Text" /&gt;
 595 |     template(v-slot:preview)
 596 |       b
 597 |         label(for="otherInput") Text Input
 598 |       p
 599 |         input#otherInput.native-input(type="text" placeholder="Text")
 600 |       b
 601 |         label(for="simplePicker") Default Vue Timepicker
 602 |       p
 603 |         vue-timepicker(id="simplePicker")
 604 |       b
 605 |         label(for="moreInput") Number Input
 606 |       p
 607 |         input#moreInput.native-input(type="number" placeholder="Number")
 608 |       b
 609 |         label(for="pickerKB") Vue Timepicker with Advanced Keyboard support
 610 |       p
 611 |         vue-timepicker(id="pickerKB" format="h:mm:ss A" :hour-range="[['7a', '5p']]" advanced-keyboard)
 612 |       b
 613 |         label(for="oneMoreInput") One More Text Input
 614 |       p
 615 |         input#oneMoreInput.native-input(type="text" placeholder="More Text")
 616 | 
 617 |   //- Manual Input
 618 |   sample-block#manualInput
 619 |     template(v-slot:title) Manual Input
 620 |     p(slot="description")
 621 |       | Allow users to input values manually. Please note that the additional <code>hide-dropdown</code> option works with <code>manual-input</code> mode only.
 622 |     template(v-slot:codes)
 623 |       highlight-code(lang="html" data-title="HTML")
 624 |         pre
 625 |           | &lt;!-- 24-hour format with empty init value --&gt;
 626 |           | &lt;vue-timepicker manual-input&gt;&lt;/vue-timepicker&gt;
 627 |           |
 628 |           | &lt;!-- 12-hour format with a predefined value --&gt;
 629 |           | &lt;vue-timepicker format="h:mm a" v-model="manualStringValue" manual-input&gt;&lt;/vue-timepicker&gt;
 630 |           |
 631 |           | &lt;!-- Manual input + hide dropdown --&gt;
 632 |           | &lt;vue-timepicker manual-input hide-dropdown&gt;&lt;/vue-timepicker&gt;
 633 |       highlight-code(lang="javascript" data-title="JS")
 634 |         pre
 635 |           | data () {
 636 |           |   return {
 637 |           |     manualStringValue: '8:15 pm'
 638 |           |   }
 639 |           | }
 640 |     template(v-slot:preview)
 641 |       b 24-hour format with empty init value
 642 |       p
 643 |         vue-timepicker(manual-input)
 644 |       b 12-hour format with a predefined value
 645 |       p
 646 |         vue-timepicker(format="h:mm a" v-model="manualStringValue" manual-input)
 647 |       b Manual input + hide dropdown
 648 |       p
 649 |         vue-timepicker(manual-input hide-dropdown)
 650 | 
 651 |   //- Open And Close Event
 652 |   sample-block#openAndClose
 653 |     template(v-slot:title)
 654 |       code open
 655 |       | &nbsp;and&nbsp;
 656 |       code close
 657 |       | &nbsp;event
 658 |     p(slot="description")
 659 |       | Help to identify the current state of the dropdown picker.
 660 |     template(v-slot:codes)
 661 |       highlight-code(lang="javascript" data-title="JS")
 662 |         pre
 663 |           | // Define a variable for logging the status
 664 |           | data () {
 665 |           |   return {
 666 |           |     dropdownStatus: 'closed'
 667 |           |   }
 668 |           | }
 669 |       highlight-code(lang="html" data-title="HTML")
 670 |         pre
 671 |           | &lt;p&gt;Dropdown Status: I'm <span>{{</span>dropdownStatus<span>}}</span>!&lt;/p&gt;
 672 |           | &nbsp;
 673 |           | &lt;vue-timepicker @open="dropdownStatus = 'opened'" @close="dropdownStatus = 'closed'"&gt;&lt;/vue-timepicker&gt;
 674 |     template(v-slot:preview)
 675 |       b Dropdown Status: I'm {{dropdownStatus}}!
 676 |       p
 677 |         vue-timepicker(@open="dropdownStatus = 'opened'" @close="dropdownStatus = 'closed'")
 678 | 
 679 |   //- Focus And Blur Event
 680 |   sample-block#focusAndBlur
 681 |     template(v-slot:title)
 682 |       code focus
 683 |       | &nbsp;and&nbsp;
 684 |       code blur
 685 |       | &nbsp;event
 686 |     p(slot="description")
 687 |       | It works with Manual Input mode. Helps to identify the focus/blur state of the Timepicker's input. Especially useful when the dropdown is force hidden by <code>hide-dropdown</code>.
 688 |     template(v-slot:codes)
 689 |       highlight-code(lang="javascript" data-title="JS")
 690 |         pre
 691 |           | data () {
 692 |           |   return {
 693 |           |     // variable for the input state
 694 |           |     focusState: 'blurred',
 695 |           |
 696 |           |     // variable for the dropdown state
 697 |           |     dropdownState: 'closed'
 698 |           |   }
 699 |           | }
 700 |       highlight-code(lang="html" data-title="HTML")
 701 |         pre
 702 |           | &lt;span&gt;Focus State: <span>{{</span>focusState<span>}}</span>&lt;/span&gt;
 703 |           | &lt;span&gt;Dropdown State: <span>{{</span>dropdownState<span>}}</span>&lt;/span&gt;
 704 |           | &nbsp;
 705 |           | &lt;vue-timepicker manual-input hide-dropdown @focus="focusState = 'focused'" @blur="focusState = 'blurred'" @open="dropdownState = 'opened'" @close="dropdownState = 'closed'"&gt;&lt;/vue-timepicker&gt;
 706 |     template(v-slot:preview)
 707 |       b Focus State: {{focusState}}
 708 |       span &emsp;/&emsp;
 709 |       b Dropdown State: {{ dropdownState }}
 710 |       p
 711 |         vue-timepicker(manual-input hide-dropdown @focus="focusState = 'focused'" @blur="focusState = 'blurred'" @open="dropdownState = 'opened'" @close="dropdownState = 'closed'")
 712 | 
 713 |   //- Custom Labels
 714 |   sample-block#customPickerLabels
 715 |     template(v-slot:title) Customized Picker Labels
 716 |     p(slot="description")
 717 |       | Define customized labels for hour, minute, second, and APM pickers.
 718 |     template(v-slot:codes)
 719 |       highlight-code(lang="html" data-title="HTML")
 720 |         pre
 721 |           | &lt;!-- 24-hour format with customized hour and minute labels --&gt;
 722 |           | &lt;vue-timepicker hour-label="heure" minute-label="minute"&gt;&lt;/vue-timepicker&gt;
 723 |           |
 724 |           | &lt;!-- 12-hour format with customized am/pm text --&gt;
 725 |           | &lt;vue-timepicker hour-label="时" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a"&gt;&lt;/vue-timepicker&gt;
 726 |     template(v-slot:preview)
 727 |       b 24-hour format with customized hour and minute label
 728 |       p
 729 |         vue-timepicker(hour-label="heure" minute-label="minute")
 730 |       b 12-hour format with customized am/pm text
 731 |       p
 732 |         vue-timepicker(hour-label="时" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a")
 733 | 
 734 |   //- Adjust Input Width
 735 |   sample-block#inputWidth
 736 |     template(v-slot:title) Adjust Input Width
 737 |     p(slot="description")
 738 |       | Helps you to adjust both the
 739 |       code &lt;input&gt;
 740 |       | and the dropdown picker's width
 741 |     template(v-slot:codes)
 742 |       highlight-code(lang="html" data-title="HTML")
 743 |         pre
 744 |           | &lt;!-- In `px` --&gt;
 745 |           | &lt;vue-timepicker input-width="100px"&gt;&lt;/vue-timepicker&gt;
 746 |           |
 747 |           | &lt;!-- In `em` --&gt;
 748 |           | &lt;vue-timepicker input-width="12em" format="HH:mm:ss"&gt;&lt;/vue-timepicker&gt;
 749 |     template(v-slot:preview)
 750 |       b In `px`
 751 |       p
 752 |         vue-timepicker(input-width="100px")
 753 |       b In `em`
 754 |       p
 755 |         vue-timepicker(input-width="12em" format="HH:mm:ss")
 756 | 
 757 |   //- Auto Scroll
 758 |   sample-block#autoScroll
 759 |     template(v-slot:title) Auto-Scroll
 760 |     p(slot="description") Auto-scroll to selected value on dropdown open.
 761 |     template(v-slot:codes)
 762 |       highlight-code(lang="html" data-title="HTML")
 763 |         pre
 764 |           | &lt;!-- Default format --&gt;
 765 |           | &lt;vue-timepicker auto-scroll v-model="autoScrollData1"&gt;&lt;/vue-timepicker&gt;
 766 |           | &nbsp;
 767 |           | &lt;!-- 12-hour format --&gt;
 768 |           | &lt;vue-timepicker auto-scroll format="h:mm:ss a" v-model="autoScrollData2"&gt;&lt;/vue-timepicker&gt;
 769 |       highlight-code(lang="javascript" data-title="JS")
 770 |         pre
 771 |           | // Initial values
 772 |           | data () {
 773 |           |   return {
 774 |           |     autoScrollData1: '08:40',
 775 |           |     autoScrollData2: '5:30:20 pm'
 776 |           |   }
 777 |           | }
 778 |     template(v-slot:preview)
 779 |       b Default format
 780 |       p
 781 |         vue-timepicker(auto-scroll v-model="autoScrollData1")
 782 |       b 12-hour format
 783 |       p
 784 |         vue-timepicker(auto-scroll format="h:mm:ss a" v-model="autoScrollData2")
 785 | 
 786 |   //- More Powerful format String
 787 |   sample-block#morePowerfulFormat
 788 |     template(v-slot:title) More Powerful <code>format</code> String
 789 |     template(slot="description")
 790 |       p The <code>format</code> parameter becomes even more powerful started from <code>v1.1.2</code>.
 791 |     template(v-slot:codes)
 792 |       highlight-code(lang="html" data-title="HTML")
 793 |         pre
 794 |           | &lt;!-- Use without "hour" --&gt;
 795 |           | &lt;vue-timepicker format="mm:ss"&gt;&lt;/vue-timepicker&gt;
 796 |           | &lt;vue-timepicker format="m:s"&gt;&lt;/vue-timepicker&gt;
 797 |           | &nbsp;
 798 |           | &lt;!-- Make AM/PM the first column in the dropdown --&gt;
 799 |           | &lt;vue-timepicker format="A hh:mm" v-model="apmFirst1"&gt;&lt;/vue-timepicker&gt;
 800 |           | &lt;vue-timepicker format="ah時m分" v-model="apmFirst2" am-text="午前" pm-text="午後"&gt;&lt;/vue-timepicker&gt;
 801 |           | &nbsp;
 802 |           | &lt;!-- Hour + APM only --&gt;
 803 |           | &lt;vue-timepicker format="ha"&gt;&lt;/vue-timepicker&gt;
 804 |           | &lt;vue-timepicker format="hh A"&gt;&lt;/vue-timepicker&gt;
 805 |           | &nbsp;
 806 |           | &lt;!-- One slot only --&gt;
 807 |           | &lt;!-- Not recommended, though :) --&gt;
 808 |           | &lt;vue-timepicker format="h" input-width="60px"&gt;&lt;/vue-timepicker&gt;
 809 |           | &lt;vue-timepicker format="mm" input-width="60px"&gt;&lt;/vue-timepicker&gt;
 810 |           | &lt;vue-timepicker format="ss" input-width="60px"&gt;&lt;/vue-timepicker&gt;
 811 |           | &lt;vue-timepicker format="a" input-width="60px"&gt;&lt;/vue-timepicker&gt;
 812 |       highlight-code(lang="javascript" data-title="JS")
 813 |         pre
 814 |           | // Initial values
 815 |           | data () {
 816 |           |   return {
 817 |           |     apmFirst1: 'AM 03:15',
 818 |           |     // -> Equivalent to:
 819 |           |     // apmFirst1: {
 820 |           |     //   A: 'AM',
 821 |           |     //   hh: '03',
 822 |           |     //   mm: '15'
 823 |           |     // }
 824 |           |
 825 |           |     apmFirst2: 'pm9時6分'
 826 |           |     // -> Equivalent to:
 827 |           |     // apmFirst2: {
 828 |           |     //   a: 'pm',
 829 |           |     //   h: '9',
 830 |           |     //   m: '6'
 831 |           |     // }
 832 |           |   }
 833 |           | }
 834 |     template(v-slot:preview)
 835 |       b Use without "hour"
 836 |       p
 837 |         vue-timepicker(format="mm:ss")
 838 |         | &nbsp;
 839 |         vue-timepicker(format="m:s")
 840 |       b Make AM/PM the first column in the dropdown
 841 |       p
 842 |         vue-timepicker(format="A hh:mm" v-model="apmFirst1")
 843 |         | &nbsp;
 844 |         vue-timepicker(format="ah時m分" v-model="apmFirst2" am-text="午前" pm-text="午後")
 845 |       b Hour + APM only
 846 |       p
 847 |         vue-timepicker(format="ha")
 848 |         | &nbsp;
 849 |         vue-timepicker(format="hh A")
 850 |       b One slot only
 851 |       p
 852 |         vue-timepicker(format="h" input-width="60px")
 853 |         | &nbsp;
 854 |         vue-timepicker(format="mm" input-width="60px")
 855 |         | &nbsp;
 856 |         vue-timepicker(format="ss" input-width="60px")
 857 |         | &nbsp;
 858 |         vue-timepicker(format="a" input-width="60px")
 859 | 
 860 |   //- Custom Button And Icon
 861 |   sample-block#customButtonIcon
 862 |     template(v-slot:title) Customized Buttons And Input Icon
 863 |     template(v-slot:description)
 864 |       p You can customize the clear button, and the dropdown button with your own icon/image starts from <code>v1.1.4+</code>. There's an additional slot for the input icon as well.
 865 |       p Please note that Vue v2.6.0+ introduces a significant update of the <b>Named Slots</b> syntax. Check the <a href="https://vuejs.org/v2/guide/components-slots.html#Named-Slots" target="_black">official documentation</a> for more information.
 866 | 
 867 |     template(v-slot:codes)
 868 |       highlight-code(lang="html" data-title="HTML")
 869 |         pre
 870 |           | &lt;!-- For Vue 2.6.0+ --&gt;
 871 |           |
 872 |           | &lt;!-- Input icon (image) --&gt;
 873 |           | &lt;vue-timepicker&gt;
 874 |           |   &lt;template v-slot:icon&gt;
 875 |           |     &lt;img src="$YOUR_ICON_SRC" /&gt;
 876 |           |   &lt;/template&gt;
 877 |           | &lt;/vue-timepicker&gt;
 878 |           |
 879 |           | &lt;!-- Customized clear button (image) --&gt;
 880 |           | &lt;vue-timepicker&gt;
 881 |           |   &lt;template v-slot:clearButton&gt;
 882 |           |     &lt;img src="$YOUR_CUSTOM_IMAGE_SRC" /&gt;
 883 |           |   &lt;/template&gt;
 884 |           | &lt;/vue-timepicker&gt;
 885 |           |
 886 |           | &lt;!-- Customized dropdown button (character entity) --&gt;
 887 |           | &lt;vue-timepicker manual-input hide-dropdown&gt;
 888 |           |   &lt;template v-slot:dropdownButton&gt;&amp;#x02263;&lt;/template&gt;
 889 |           | &lt;/vue-timepicker&gt;
 890 | 
 891 |     template(v-slot:preview)
 892 |       b Input icon (image)
 893 |       p
 894 |         vue-timepicker
 895 |           template(v-slot:icon)
 896 |             img(src="https://i.postimg.cc/CLkZcW46/custom-clock.png")
 897 |       b Customized clear button (image)
 898 |       p
 899 |         vue-timepicker(v-model="customCloseBtnValue")
 900 |           template(v-slot:clearButton)
 901 |             img(src="https://i.postimg.cc/Y0f6RHF8/custom-close.png")
 902 |       b Customized dropdown button (character entity)
 903 |       p
 904 |         vue-timepicker(manual-input hide-dropdown)
 905 |           template(v-slot:dropdownButton) &#x02263;
 906 | 
 907 | 
 908 |   //- Fixed Dropdown Button
 909 |   sample-block#fixedDropdownButton
 910 |     template(v-slot:title) Fixed Dropdown Button
 911 |     template(v-slot:description)
 912 |       p You can make the dropdown button always visible in the UI with <code>fixed-dropdown-button</code>.
 913 |       p When paired with a customized dropdown button, it's similar to an input icon on the righthand side.
 914 | 
 915 |     template(v-slot:codes)
 916 |       highlight-code(lang="html" data-title="HTML")
 917 |         pre
 918 |           | &lt;!-- Default dropdown button --&gt;
 919 |           | &lt;vue-timepicker fixed-dropdown-button&gt;&lt;/vue-timepicker&gt;
 920 |           |
 921 |           | &lt;!-- Customized + fixed dropdown button --&gt;
 922 |           | &lt;vue-timepicker fixed-dropdown-button&gt;
 923 |           |   &lt;template v-slot:dropdownButton&gt;
 924 |           |     &lt;img src="$YOUR_BUTTON_IMAGE_SRC" /&gt; 
 925 |           |   &lt;/template&gt;
 926 |           | &lt;/vue-timepicker&gt;
 927 |           |
 928 |           | &lt;!-- To display only one button on the right --&gt;
 929 |           | &lt;!-- Customized + fixed dropdown button + hide clear button --&gt;
 930 |           | &lt;vue-timepicker fixed-dropdown-button hide-clear-button&gt;
 931 |           |   &lt;template v-slot:dropdownButton&gt;
 932 |           |     &lt;img src="$YOUR_BUTTON_IMAGE_SRC" /&gt; 
 933 |           |   &lt;/template&gt;
 934 |           | &lt;/vue-timepicker&gt;
 935 | 
 936 |     template(v-slot:preview)
 937 |       b Default dropdown button
 938 |       p
 939 |         vue-timepicker(fixed-dropdown-button)
 940 |       b Customized + fixed dropdown button
 941 |       p
 942 |         vue-timepicker(fixed-dropdown-button)
 943 |           template(v-slot:dropdownButton)
 944 |             img(src="https://i.postimg.cc/CLkZcW46/custom-clock.png")
 945 |       b Customized + fixed dropdown button + hide clear button
 946 |       p
 947 |         vue-timepicker(fixed-dropdown-button hide-clear-button)
 948 |           template(v-slot:dropdownButton)
 949 |             img(src="https://i.postimg.cc/CLkZcW46/custom-clock.png")
 950 | 
 951 |   //- Drop Direction
 952 |   sample-block#dropDirection
 953 |     template(v-slot:title) Drop Direction
 954 |     template(v-slot:description)
 955 |       p Change dropdown direction when needed (<code>v1.1.5+</code>).  Accepting values:
 956 |       ul
 957 |         li
 958 |           b down
 959 |           | : Default value.
 960 |         li
 961 |           b up
 962 |           | : Force open the dropdown above the input.
 963 |         li
 964 |           b auto
 965 |           | : Auto detects available height and opens the dropdown on top if there are not enough spaces below the input.
 966 | 
 967 |     template(v-slot:codes)
 968 |       highlight-code(lang="html" data-title="HTML")
 969 |         pre
 970 |           | &lt;!-- Drop Direction Up --&gt;
 971 |           | &lt;vue-timepicker drop-direction="up"&gt;&lt;/vue-timepicker&gt;
 972 |           | &nbsp;
 973 |           | &lt;!-- Auto Drop Direction --&gt;
 974 |           | &lt;div id="auto-dropdown-containter"&gt;
 975 |           |   &lt;!-- Defined Container --&gt;
 976 |           |   &lt;vue-timepicker drop-direction="auto" container-id="auto-dropdown-containter"&gt;&lt;/vue-timepicker&gt;
 977 |           |   &lt;!-- Default (document body) --&gt;
 978 |           |   &lt;vue-timepicker drop-direction="auto"&gt;&lt;/vue-timepicker&gt;
 979 |           | &lt;/div&gt;
 980 |     template(v-slot:preview)
 981 |       b Drop Direction Up
 982 |       p
 983 |         vue-timepicker(drop-direction="up")
 984 |       #auto-dropdown-containter
 985 |         .demo-title
 986 |           b Auto Drop Direction
 987 |         .demo-body
 988 |           .inner
 989 |             b Defined Container
 990 |             p
 991 |               vue-timepicker(drop-direction="auto" container-id="auto-dropdown-containter")
 992 |           .inner
 993 |             b Default (document body)
 994 |             p
 995 |               vue-timepicker(drop-direction="auto")
 996 | 
 997 |   //- Footer Links
 998 |   .footer-links
 999 |     slot(name="footer-links")
1000 | 
1001 |   //- Side Nav
1002 |   .sidenav
1003 |     nav
1004 |       ul
1005 |         li(v-for="(nav, navIdx) in sideNav" :key="navIdx")
1006 |           a(:href="'#' + nav.anchor" v-text="nav.title")
1007 | </template>
1008 | 
1009 | <style lang="stylus">
1010 | @import '../assets/_variables.styl'
1011 | 
1012 | section#mostlyUsedSamples
1013 |   .section-title
1014 |     padding-left: 20%
1015 | 
1016 |   .footer-links
1017 |     padding: 5em 0 0 20%
1018 |     a
1019 |       cursor: pointer
1020 |     .title
1021 |       position: relative
1022 |       margin-bottom: 1.5em
1023 |       a.anchor
1024 |         position: absolute
1025 |         left: -1em
1026 | 
1027 |     .description
1028 |       margin-left: 1.5em
1029 | 
1030 |   .sidenav
1031 |     position: fixed
1032 |     width: 20%
1033 |     bottom: 0
1034 |     left: 0
1035 |     max-height: calc(100vh - 50px)
1036 |     overflow-y: auto
1037 | 
1038 |     ul
1039 |       padding: 0 0 0.5em 1.5em
1040 |       margin: 0
1041 |       list-style: square
1042 | 
1043 |       li
1044 |         padding: 0.15em 0
1045 |         font-size: 0.8em
1046 |         color: alpha($body-color, 0.4)
1047 | 
1048 |   // Browser Native Input
1049 |   input.native-input
1050 |     box-sizing: border-box
1051 |     border: 1px solid #d2d2d2
1052 |     width: 10em
1053 |     height: 2.2em
1054 |     padding: 0.3em 0.5em
1055 |     font-size: 1em
1056 |   
1057 |   // Drop Direction Demo
1058 |   #auto-dropdown-containter
1059 |     margin-top: 1em
1060 |     padding: 1em
1061 |     background: rgba(0, 0, 0, 0.05)
1062 |     border-radius: 5px
1063 |     .demo-title
1064 |       font-weight: 600
1065 |       padding: 0 0 0.5em 0
1066 | 
1067 |     .demo-body
1068 |       display: flex
1069 |       flex-flow: row nowrap
1070 |       justify-content: flex-start
1071 |       align-items: flex-start
1072 |       .inner
1073 |         margin-right: 0.5em
1074 |       b
1075 |         font-weight: normal
1076 | </style>
1077 | 


--------------------------------------------------------------------------------
/demo/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | import VueHighlightJS from 'vue-highlight.js'
 4 | import javascript from 'highlight.js/lib/languages/javascript'
 5 | import json from 'highlight.js/lib/languages/json'
 6 | import vue from 'vue-highlight.js/lib/languages/vue'
 7 | import 'highlight.js/styles/docco.css'
 8 | 
 9 | import App from './App.vue'
10 | 
11 | Vue.config.productionTip = false
12 | 
13 | /*
14 | * Use Vue Highlight.js
15 | */
16 | Vue.use(VueHighlightJS, {
17 |   // Register only languages that you want
18 |   languages: {
19 |     javascript,
20 |     json,
21 |     vue
22 |   }
23 | })
24 | 
25 | new Vue({
26 |   render: h => h(App),
27 | }).$mount('#app')
28 | 


--------------------------------------------------------------------------------
/demo/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   outputDir: '../gh-pages',
3 |   publicPath: process.env.NODE_ENV === 'production'
4 |     ? '/vue2-timepicker/'
5 |     : '/'
6 | }
7 | 


--------------------------------------------------------------------------------
/dist/VueTimepicker.css:
--------------------------------------------------------------------------------
1 | .vue__time-picker{display:inline-block;position:relative;font-size:1em;width:10em;font-family:sans-serif;vertical-align:middle}.vue__time-picker *{-webkit-box-sizing:border-box;box-sizing:border-box}.vue__time-picker input.display-time{border:1px solid #d2d2d2;width:10em;height:2.2em;padding:.3em .5em;font-size:1em}.vue__time-picker input.has-custom-icon{padding-left:1.8em}.vue__time-picker input.display-time.invalid:not(.skip-error-style){border-color:#c03;outline-color:#c03}.vue__time-picker input.display-time.disabled,.vue__time-picker input.display-time:disabled{color:#d2d2d2}.vue__time-picker .controls{position:absolute;top:0;bottom:0;right:0;z-index:3;-webkit-box-orient:horizontal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;pointer-events:none}.vue__time-picker .controls,.vue__time-picker .controls>*{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}.vue__time-picker .controls>*{cursor:pointer;width:auto;-webkit-box-orient:vertical;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 .35em;color:#d2d2d2;line-height:100%;font-style:normal;pointer-events:auto;-webkit-transition:color .2s,opacity .2s;transition:color .2s,opacity .2s}.vue__time-picker .controls>:hover{color:#797979}.vue__time-picker .controls>:active,.vue__time-picker .controls>:focus{outline:0}.vue__time-picker .controls .char{font-size:1.1em;line-height:100%;-webkit-margin-before:-.15em}.vue__time-picker .custom-icon{z-index:2;position:absolute;left:0;top:0;bottom:0;width:1.8em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none}.vue__time-picker .controls img,.vue__time-picker .controls svg,.vue__time-picker .custom-icon img,.vue__time-picker .custom-icon svg{display:inline-block;vertical-align:middle;margin:0;border:0;outline:0;max-width:1em;height:auto}.vue__time-picker .time-picker-overlay{z-index:4;position:fixed;top:0;left:0;right:0;bottom:0}.vue__time-picker-dropdown,.vue__time-picker .dropdown{position:absolute;z-index:5;top:calc(2.2em + 2px);left:0;background:#fff;-webkit-box-shadow:0 1px 6px rgba(0,0,0,.15);box-shadow:0 1px 6px rgba(0,0,0,.15);width:10em;height:10em;font-weight:400}.vue__time-picker-dropdown{position:fixed;z-index:100}.vue__time-picker-dropdown.drop-up,.vue__time-picker .dropdown.drop-up{top:auto;bottom:calc(2.2em + 1px)}.vue__time-picker-dropdown .select-list,.vue__time-picker .dropdown .select-list{width:10em;height:10em;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.vue__time-picker-dropdown .select-list:active,.vue__time-picker-dropdown .select-list:focus,.vue__time-picker .dropdown .select-list:active,.vue__time-picker .dropdown .select-list:focus{outline:0}.vue__time-picker-dropdown ul,.vue__time-picker .dropdown ul{padding:0;margin:0;list-style:none;outline:0;-webkit-box-flex:1;-ms-flex:1 1 0.00001px;flex:1 1 0.00001px;overflow-x:hidden;overflow-y:auto}.vue__time-picker-dropdown ul.apms,.vue__time-picker-dropdown ul.minutes,.vue__time-picker-dropdown ul.seconds,.vue__time-picker .dropdown ul.apms,.vue__time-picker .dropdown ul.minutes,.vue__time-picker .dropdown ul.seconds{border-left:1px solid #fff}.vue__time-picker-dropdown ul li,.vue__time-picker .dropdown ul li{list-style:none;text-align:center;padding:.3em 0;color:#161616}.vue__time-picker-dropdown ul li:not(.hint):not([disabled]):focus,.vue__time-picker-dropdown ul li:not(.hint):not([disabled]):hover,.vue__time-picker .dropdown ul li:not(.hint):not([disabled]):focus,.vue__time-picker .dropdown ul li:not(.hint):not([disabled]):hover{background:rgba(0,0,0,.08);color:#161616;cursor:pointer}.vue__time-picker-dropdown ul li:not([disabled]).active,.vue__time-picker-dropdown ul li:not([disabled]).active:focus,.vue__time-picker-dropdown ul li:not([disabled]).active:hover,.vue__time-picker .dropdown ul li:not([disabled]).active,.vue__time-picker .dropdown ul li:not([disabled]).active:focus,.vue__time-picker .dropdown ul li:not([disabled]).active:hover{background:#41b883;color:#fff}.vue__time-picker-dropdown ul li[disabled],.vue__time-picker-dropdown ul li[disabled]:hover,.vue__time-picker .dropdown ul li[disabled],.vue__time-picker .dropdown ul li[disabled]:hover{background:transparent;opacity:.3;cursor:not-allowed}.vue__time-picker-dropdown .hint,.vue__time-picker .dropdown .hint{color:#a5a5a5;cursor:default;font-size:.8em}


--------------------------------------------------------------------------------
/dist/demo.html:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8">
 2 | <title>VueTimepicker demo</title>
 3 | <script src="./VueTimepicker.umd.js"></script>
 4 | 
 5 | <link rel="stylesheet" href="./VueTimepicker.css">
 6 | 
 7 | 
 8 | <script>
 9 | console.log(VueTimepicker)
10 | </script>
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue2-timepicker",
 3 |   "version": "1.1.6",
 4 |   "description": "A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support",
 5 |   "author": "Phoenix Wong <phoenixyfwong@gmail.com>",
 6 |   "scripts": {
 7 |     "build": "vue-cli-service build --target lib --name VueTimepicker ./src/index.js",
 8 |     "build:demo": "cd demo && yarn build",
 9 |     "dev": "cd demo && yarn serve",
10 |     "dev:init": "cd demo && yarn install"
11 |   },
12 |   "main": "dist/VueTimepicker.umd.js",
13 |   "module": "dist/VueTimepicker.common.js",
14 |   "browser": {
15 |     "./sfc": "src/vue-timepicker.vue"
16 |   },
17 |   "unpkg": "dist/VueTimepicker.umd.min.js",
18 |   "files": [
19 |     "dist/*",
20 |     "src/*",
21 |     "*.json",
22 |     "*.md"
23 |   ],
24 |   "devDependencies": {
25 |     "@vue/cli-plugin-babel": "~4.3.1",
26 |     "@vue/cli-plugin-eslint": "~4.3.1",
27 |     "@vue/cli-service": "~4.3.1",
28 |     "babel-eslint": "^10.1.0",
29 |     "core-js": "^3.6.5",
30 |     "eslint": "^6.8.0",
31 |     "eslint-plugin-vue": "^6.2.2",
32 |     "vue": "^2.6.11",
33 |     "vue-template-compiler": "^2.6.11"
34 |   },
35 |   "peerDependencies": {
36 |     "vue": "^2.6.5"
37 |   },
38 |   "eslintConfig": {
39 |     "root": true,
40 |     "env": {
41 |       "node": true
42 |     },
43 |     "extends": [
44 |       "plugin:vue/essential",
45 |       "eslint:recommended"
46 |     ],
47 |     "rules": {},
48 |     "parserOptions": {
49 |       "parser": "babel-eslint"
50 |     }
51 |   },
52 |   "postcss": {
53 |     "plugins": {
54 |       "autoprefixer": {}
55 |     }
56 |   },
57 |   "browserslist": [
58 |     "> 1%",
59 |     "last 2 versions"
60 |   ],
61 |   "bugs": {
62 |     "url": "https://github.com/phoenixwong/vue2-timepicker/issues"
63 |   },
64 |   "css": "dist/VueTimepicker.css",
65 |   "homepage": "https://github.com/phoenixwong/vue2-timepicker#readme",
66 |   "keywords": [
67 |     "vue",
68 |     "vue2",
69 |     "time",
70 |     "picker",
71 |     "dropdown",
72 |     "input",
73 |     "UI"
74 |   ],
75 |   "license": "MIT",
76 |   "repository": {
77 |     "type": "git",
78 |     "url": "git+https://github.com/phoenixwong/vue2-timepicker.git"
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import VueTimepicker from './vue-timepicker.vue'
2 | export default VueTimepicker
3 | 


--------------------------------------------------------------------------------