### Setting up Development Environment (Bash)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/CONTRIBUTING.md

These bash commands are used to set up the development environment for the vue2-timepicker project. They install project dependencies, initialize development-specific dependencies, and start the development server with hot reload.

```bash
# Install dependencies
yarn install

# Init development dependencies
yarn dev:init

# Start developing. Serve with hot reload at localhost:8080
yarn dev
```

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

### Run Development Server with Yarn (Bash)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/demo/README.md

Compiles the project and starts a local development server with hot-reloading enabled using Yarn.

```bash
yarn run serve
```

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

### Install Project Dependencies with Yarn (Bash)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/demo/README.md

Installs all required project dependencies listed in the package.json file using the Yarn package manager.

```bash
yarn install
```

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

### Build Project for Production with Yarn (Bash)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/demo/README.md

Compiles and minifies the project code for production deployment using Yarn.

```bash
yarn run build
```

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

### Installing Vue2 Timepicker with NPM

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This command installs the vue2-timepicker package using NPM and saves it as a project dependency.

```bash
npm install vue2-timepicker --save
```

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

### Installing Vue2 Timepicker with Yarn

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This command adds the vue2-timepicker package to your project using Yarn. It is the recommended installation method.

```bash
yarn add vue2-timepicker
```

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

### Example @change Event Data

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows the comprehensive structure of the data object provided by the `@change` event, including all supported time formats and the display time.

```javascript
// `@change` event data
{
  data: {
    HH: "14",
    H: "14",
    hh: "14",
    a: "am",
    A: "AM",
    h: "14",
    kk: "14",
    k: "14",
    m: "30",
    mm: "30",
    s: "15",
    ss: "15"
  },
  // extra `displayTime` added since v0.2.2
  displayTime: "14:30:15"
}
```

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

### Lint and Fix Files with Yarn (Bash)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/demo/README.md

Runs linters to check code style and potential errors, and attempts to automatically fix issues using Yarn.

```bash
yarn run lint
```

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

### Example v-model / @input Data

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows the structure of the data returned by `v-model` or the `@input` event, which is limited to the time tokens defined in the initial binding variable.

```javascript
// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}
// Hence, the `v-model` returns:
{
  HH: "14",
  mm: "30",
  ss: "15"
}
```

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

### Customizing VueTimepicker Format (hh:mm A)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This example demonstrates using the `format` prop to display the time in 12-hour format with AM/PM indication.

```html
<!-- 12-hour format, with AM/PM picker -->
<vue-timepicker format="hh:mm A"></vue-timepicker>
```

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

### Customizing VueTimepicker Minute Interval

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

The `:minute-interval` prop allows you to set the step for minute selection. This example sets the interval to 5 minutes.

```html
<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->
<vue-timepicker :minute-interval="5"></vue-timepicker>
```

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

### Example @input Event Data

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows the structure of the data object passed to the `@input` event handler when the time is changed, reflecting the format defined by the v-model binding.

```javascript
// In `inputHandler`:
// console.log outputs -> {HH: "14", mm: "30", ss: "15"}
```

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

### Debug Mode Manual Bug Sample HTML - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

An example HTML snippet demonstrating debug mode with a `v-model` bound to a potentially invalid string value and a specified format. Used in conjunction with the corresponding JavaScript data.

```html
<!-- Manual Bug Sample: Define timepicker with format "h:mm:ss A" -->
<vue-timepicker v-model="yourStringValue" format="h:mm:ss A" debug-mode></vue-timepicker>
```

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

### Customizing VueTimepicker Second Interval

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

The `:second-interval` prop allows you to set the step for second selection. This example sets the interval to 10 seconds.

```html
<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->
<vue-timepicker :second-interval="10"></vue-timepicker>
```

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

### Defining Initial Time Value Data Vue JavaScript

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md

Provides an example of how to define the initial data structure for the `yourTimeValue` property in a Vue component's data function. This structure is used to bind the time value to the vue-timepicker component.

```javascript
// predefined data sample
data: function () {
  return {
    yourTimeValue: {
      HH: "10",
      mm: "05",
      ss: "00"
    },
    ...
  }
}
```

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

### Customizing VueTimepicker Format (HH:mm:ss)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Use the `format` prop to customize the displayed time format. This example shows how to include seconds in the 24-hour format.

```html
<!-- Show seconds picker -->
<vue-timepicker format="HH:mm:ss"></vue-timepicker>
```

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

### Customizing VueTimepicker Format (hh:mm:ss a)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This example shows a 12-hour format including seconds and lowercase am/pm indication using the `format` prop.

```html
<!-- 12-hour format, with seconds picker and am/pm picker -->
<vue-timepicker format="hh:mm:ss a"></vue-timepicker>
```

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

### Read Data From @change Event (HTML)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Demonstrates attaching the `@change` event handler to the vue-timepicker component, showing examples with and without passing custom arguments.

```html
<!-- A: No argument -->
<vue-timepicker v-model="yourTimeValue" @change="changeHandler"></vue-timepicker>

<!-- B: Custom arguments -->
<vue-timepicker v-model="yourTimeValue" @change="otherChangeHandler($event, 'foo', 42)"></vue-timepicker>
```

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

### Get Value from v-model and @input (HTML)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows how to use the `@input` event handler on the vue-timepicker component in addition to the `v-model` binding to react to value changes.

```html
<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss" @input="inputHandler"></vue-timepicker>
```

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

### Debug Mode Manual Bug Sample Data - vue2-timepicker - JavaScript

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

An example JavaScript data object for a Vue component, providing a string value (`yourStringValue`) that intentionally does not match the specified format (`h:mm:ss A`) to trigger a debug log.

```javascript
{
  data () {
    return {
      // Manual Bug Sample:
      // Should be '3:mm:05 A' but oops.. the finger slipped
      yourStringValue: 'e:mm:05 A'
    }
  }
}
```

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

### Importing Vue2 Timepicker and CSS (v1.0.0+)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md

Starting from version 1.0.0, the CSS is no longer bundled with the main JavaScript file. This snippet shows how to import the VueTimepicker component and its corresponding CSS file separately.

```JavaScript
// v1.0.0+
//
import VueTimepicker from 'vue2-timepicker'
// -> Imports JS file in UMD form

// CSS
import 'vue2-timepicker/dist/VueTimepicker.css'
```

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

### Append To Body CSS Z-Index Override - vue2-timepicker - CSS

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Provides a CSS example to override the default `z-index` of the body-appended dropdown menu. The default class is `.vue__time-picker-dropdown`.

```css
.vue__time-picker-dropdown {
  z-index: 5000;
}
```

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

### Hiding Disabled Hours in Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Provides properties to hide values excluded by range parameters (`hour-range`, `minute-range`, `second-range`). This example demonstrates hiding only disabled hour values when used with `hour-range`.

```html
<!-- `hide-disabled-hours` sample -->
<vue-timepicker :hour-range="[5, [8, 12], [14, 17], 19]" hide-disabled-hours></vue-timepicker>
```

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

### Defining Hour Range in Vue Timepicker (12-Hour)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Limits the available hours in the picker to a specific range using the `hour-range` parameter. This example shows a 12-hour format range using strings with 'a' for AM/PM.

```html
<!-- 12-Hour Format -->
<vue-timepicker :hour-range="['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']" format="hh:mm a"></vue-timepicker>
```

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

### Defining Hour Range in Vue Timepicker (24-Hour)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Limits the available hours in the picker to a specific range using the `hour-range` parameter. This example shows a 24-hour format range using an array of numbers and nested arrays for continuous ranges.

```html
<!-- 24-Hour Format -->
<vue-timepicker :hour-range="[5, [8, 12], [14, 17], 19]"></vue-timepicker>
```

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

### Comparing Change Event Return Values Vue 1.x vs 2.x JavaScript

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md

Highlights the difference in the content of the value returned by the `change` event between Vue 1.x and Vue 2.x. Vue 1.x only returned values for predefined tokens, while Vue 2.x always returns a full package containing values for all supported tokens.

```javascript
// Vue 1.x
// - only returns predefined tokens ('HH', 'mm' and 'ss')
{
  HH: "14",
  mm: "30",
  ss: "15"
}
```

```javascript
// Vue 2.x version
// - returns All supported tokens
{
  HH: "14",
  H: "14",
  hh: "14",
  a: "am",
  A: "AM",
  h: "14",
  kk: "14",
  k: "14",
  m: "30",
  mm: "30",
  s: "15",
  ss: "15"
}
```

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

### Importing VueTimepicker (UMD JS + CSS)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This snippet shows how to import the main UMD JavaScript file and the required CSS file for the Vue2 Timepicker component.

```javascript
// Main JS (in UMD format)
import VueTimepicker from 'vue2-timepicker'

// CSS
import 'vue2-timepicker/dist/VueTimepicker.css'
```

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

### Comparing Change Event Data Structure Vue 1.x vs 2.x JavaScript

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md

Shows the difference in the data structure received by the `change` event handler between Vue 1.x and Vue 2.x versions of vue-timepicker. In Vue 1.x, the data was wrapped in an array, whereas in Vue 2.x, the data object is returned directly.

```javascript
// Vue 1.x
[
  {
    data: {
      HH:...,
      mm:...,
      ...
    }
  }
]
```

```javascript
// Vue 2.x version
{
  data: {
    HH:...,
    mm:...,
    ...
  }
}
```

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

### Importing VueTimepicker (UMD Bundle)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This import statement shows how to use the UMD bundle of the Vue2 Timepicker component.

```javascript
// UMD
import VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.js'
```

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

### Importing VueTimepicker (CommonJS Bundle)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This import statement shows how to use the CommonJS bundle of the Vue2 Timepicker component.

```javascript
// CommonJS
import VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.common.js'
```

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

### Importing VueTimepicker (UMD Minified Bundle)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This import statement shows how to use the minified UMD bundle of the Vue2 Timepicker component.

```javascript
// UMD Minified
import VueTimepicker from 'vue2-timepicker/dist/VueTimepicker.umd.min.js'
```

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

### Importing VueTimepicker for SSR (Src Folder)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

If the SFC alias doesn't work in your SSR environment, you can manually point the import to the source folder.

```javascript
// Manually point to the `/src` folder
import VueTimepicker from 'vue2-timepicker/src'
```

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

### Importing VueTimepicker CSS (CSS @import)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This CSS snippet demonstrates how to import the Vue2 Timepicker stylesheet using the standard CSS @import rule.

```css
@import 'vue2-timepicker/dist/VueTimepicker.css';
```

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

### Set Partially-Known Initial Value (JS)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Demonstrates setting initial values where only some time slots are known, using both Object and String formats for 24-hour and 12-hour time representations.

```javascript
data () {
  return {
    // OBJECT FORM
    // Default 24-Hour
    timeValue: {
      HH: '20',
      mm: ''
    },
    // 12-Hour with seconds
    timeValueWithSec: {
      h: '8',
      mm: '',
      ss: '',
      A: 'PM'
    },

    // STRING FORM
    // Default 24-Hour + String value
    stringTimeValue: '20:mm',
    // 12-Hour with seconds + String value
    stringTimeValueWithSec: '8:mm:ss PM'
  }
}
```

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

### Customizing Picker Labels and AM/PM Text (Vue Timepicker)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Illustrates how to use various props (`hour-label`, `minute-label`, `second-label`, `apm-label`, `am-text`, `pm-text`) to set custom labels for the time picker components and the AM/PM indicators.

```HTML
<!-- 24-hour format with customized hour and minute label -->
<vue-timepicker hour-label="heure" minute-label="minute"></vue-timepicker>

<!-- 12-hour format with customized am/pm text -->
<vue-timepicker hour-label="時" minute-label="分" second-label="秒" apm-label="午" am-text="上午" pm-text="下午" format="h:mm:ss a"></vue-timepicker>
```

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

### Set Empty Initial Value (JS)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Illustrates setting empty initial values for the vue-timepicker's v-model binding in a Vue component's data, showing how different empty types (Object, undefined, null, empty String) are interpreted.

```javascript
data () {
  return {
    // Will be rendered as Object form
    yourEmptyValue: {},
    emptyValueToo: undefined,
    emptyValueAsWell: null,

    // Will be taken into String form
    yourEmptyStringValue: ''
  }
}
```

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

### Importing VueTimepicker CSS (CSS @import with Alias)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This CSS snippet shows how to import the Vue2 Timepicker stylesheet using a node_modules alias path, which may vary depending on your bundler configuration.

```css
/* Or, with node_module alias path like: */
@import '~vue2-timepicker/dist/VueTimepicker.css';
```

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

### Importing VueTimepicker (Single File Component)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This import statement shows how to directly import the Vue Single File Component (.vue file) which includes its CSS. This might require additional bundler configuration.

```javascript
// The *.vue file with CSS included
import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'
// NOTE: In some cases, it requires additional workarounds in the bundler's config
```

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

### Importing VueTimepicker for SSR (SFC Alias)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This import method is recommended for Server-Side Rendering (SSR) and uses a specific alias to import the Single File Component.

```javascript
// Import the *.vue file (CSS included)
import VueTimepicker from 'vue2-timepicker/sfc'
// Note the `/sfc` suffix here
```

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

### Set Initial Value with v-model (JS)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Demonstrates setting the initial value for the vue-timepicker component's v-model binding in a Vue component's data property, showing both Object and String formats.

```javascript
const yourComponent = new Vue({
  components: { VueTimepicker },
  data () {
    return {
      // Object form
      yourTimeValue: {
        HH: '10',
        mm: '05',
        ss: '00'
      },
      // String form
      yourStringTimeValue: '10:05:00',
      ...
    }
  },
  ...
})
```

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

### Bind Initial Value with v-model (HTML)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows how to bind the vue-timepicker component to data properties using `v-model`, illustrating usage with both Object and String initial values.

```html
<!-- Object form -->
<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss"></vue-timepicker>

<!-- String form -->
<vue-timepicker v-model="yourStringTimeValue" format="HH:mm:ss"></vue-timepicker>
```

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

### Importing VueTimepicker for SSR (Src File)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Alternatively, for SSR, you can manually point the import directly to the specific source file name.

```javascript
// Or, to the specific file name
import VueTimepicker from 'vue2-timepicker/src/vue-timepicker.vue'
```

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

### Configuring Input Placeholder on vue-timepicker (HTML)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows how the `placeholder` prop affects the input field's placeholder text. It also illustrates the fallback behavior where the `format` string or the default format ("HH:mm") is used if `placeholder` is not explicitly set.

```html
<!-- placeholder is set -->
<vue-timepicker placeholder="Start Time"></vue-timepicker>
<!-- -> "Start Time" -->

<!-- placeholder not set -->
<vue-timepicker format="hh:mm A"></vue-timepicker>
<!-- -> "hh:mm A" -->

<!-- both placeholder and format are not set -->
<vue-timepicker></vue-timepicker>
<!-- -> "HH:mm" -->
```

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

### Updating Change Event Handler Arguments Vue 1.x to 2.x HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md

Illustrates the necessary change in accessing event arguments within the `@change` event handler when migrating from Vue 1.x to Vue 2.x. The `$arguments` parameter used in Vue 1.x is replaced by the standard `$event` parameter in Vue 2.x.

```html
<!-- Vue 1.x -->
<vue-timepicker :time-value.sync="yourTimeValue" @change="changeHandler($arguments, 'foo', 'bar')"></vue-timepicker>
```

```html
<!-- Vue 2.x version -->
<vue-timepicker :time-value.sync="yourTimeValue" @change="changeHandler($event, 'foo', 'bar')"></vue-timepicker>
```

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

### Rendered HTML with Various input-class Types

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows that using String, Array, or Object types for the `input-class` prop results in the same set of classes being applied to the input element in the rendered HTML.

```html
<!-- All of the three samples above return the same result in rendered HTML -->
<span class="vue__time-picker time-picker">
  <input class="display-time your-awesome-timepicker i-am-vue2-timepicker" type="text" readonly="readonly">
  <!-- ... -->
</span>
```

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

### Rendered HTML with input-class Prop

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Displays the resulting HTML structure generated by the vue-timepicker component when the `input-class` prop is set, showing the applied class on the input element.

```html
<!-- HTML result -->
<span class="vue__time-picker time-picker">
  <input class="display-time my-awesome-picker" type="text" readonly="readonly">
  <!-- ... -->
</span>
```

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

### Applying CSS Classes with input-class Prop (Vue Timepicker)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows how to add custom CSS classes to the timepicker's input element using the `input-class` prop, including how to mute the default error style for the 'invalid' state.

```HTML
<!-- To mute the red border style of "invalid" state -->
<timepicker input-class="skip-error-style"></timepicker>
<timepicker :input-class="['skip-error-style', 'your-other-class-names']"></timepicker>
```

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

### Migrating VueTimepicker Binding from Vue 1.x to 2.x HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/MIGRATION.md

Demonstrates the change in binding syntax for the vue-timepicker component when migrating from Vue 1.x to Vue 2.x. Vue 1.x used the deprecated `:time-value.sync` modifier, while Vue 2.x utilizes the standard `v-model` directive for two-way binding.

```html
<!-- Vue 1.x -->
<vue-timepicker :time-value.sync="yourTimeValue"></vue-timepicker>
```

```html
<!-- Vue 2.x version -->
<vue-timepicker v-model="yourTimeValue"></vue-timepicker>
```

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

### Handling open and close Events in Vue2 Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows how to use the `@open` and `@close` event listeners on the `vue-timepicker` component to update a data property (`dropdownStatus`) reflecting the dropdown's current visibility state.

```html
<p>Dropdown Status: I'm {{dropdownStatus}}!</p>

<vue-timepicker @open="dropdownStatus = 'opened'" @close="dropdownStatus = 'closed'"></vue-timepicker>
```

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

### Using input-class Prop with String, Array, Object in Vue2 Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Demonstrates applying multiple classes using different data types (String, Array, Object) for the `input-class` prop, available from v1.0.4, providing flexibility in class binding.

```html
<!-- String type -->
<vue-timepicker input-class="your-awesome-timepicker i-am-vue2-timepicker"></vue-timepicker>

<!-- Array type -->
<vue-timepicker :input-class="['your-awesome-timepicker', 'i-am-vue2-timepicker']"></vue-timepicker>

<!-- Object type -->
<vue-timepicker :input-class="{
  'your-awesome-timepicker': true,
  'foo': false,
  'i-am-vue2-timepicker': true,
  'bar': false
}"></vue-timepicker>
```

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

### Customizing Icons and Buttons with Slots (Vue Timepicker)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows how to use the `icon`, `clearButton`, and `dropdownButton` named slots (using Vue 2.6.0+ syntax) to replace the default icons and buttons with custom content like images or character entities.

```HTML
<!-- For Vue 2.6.0+ -->

<!-- Input icon (image) -->
<vue-timepicker>
  <template v-slot:icon>
    <img src="$YOUR_ICON_SRC" />
  </template>
</vue-timepicker>

<!-- Customized clear button (image) -->
<vue-timepicker>
  <template v-slot:clearButton>
    <img src="$YOUR_CUSTOM_IMAGE_SRC" />
  </template>
</vue-timepicker>

<!-- Customized dropdown button (character entity) -->
<vue-timepicker manual-input hide-dropdown>
  <template v-slot:dropdownButton>&#x02263;</template>
</vue-timepicker>
```

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

### Setting up Error Event Handling in Vue2 Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Configures the `vue-timepicker` component with `hour-range`, `minute-interval`, and an `@error` event listener to detect and handle invalid input values based on the specified constraints (available from v1.1.0+).

```html
<!-- Got the `hour-range` and `minute-interval` set -->
<!-- And add a hanlder to pick up the "error" event -->
<vue-timepicker format="H:mm:ss" v-model="erroredInputSample" :hour-range="[8, 9, 10, 11]" :minute-interval="5" @error="errorHanlder"></vue-timepicker>
```

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

### Basic VueTimepicker Usage (Default)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This is the simplest way to use the component. By default, it will display a time picker with hour and minute selection in 24-hour format (HH:mm).

```html
<!-- Default to 24-Hour format HH:mm -->
<vue-timepicker></vue-timepicker>
```

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

### Resulting HTML Structure with Autocomplete (HTML)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows the generated HTML structure when the `autocomplete` prop is used. The `autocomplete` attribute is applied directly to the embedded `<input>` element within the component's span wrapper.

```html
<!-- HTML result -->
<span class="vue__time-picker time-picker">
  <input class="display-time" name="starttime" type="text" autocomplete="on">
  <!-- ... -->
</span>
```

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

### Using VueTimepicker in Template

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Once registered, you can use the `vue-timepicker` tag in your component's template to render the time picker.

```html
<vue-timepicker></vue-timepicker>
```

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

### Initializing Data for Dropdown Status in Vue2 Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Defines a data property `dropdownStatus` within a Vue component's data function to track the current open or closed state of the timepicker's dropdown.

```javascript
data () {
  return {
    dropdownStatus: 'closed'
  }
}
```

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

### Setting input-width Prop in Vue2 Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Illustrates how to set the width of both the input element and the dropdown picker using the `input-width` prop with standard CSS width values like 'px' and 'em'.

```html
<!-- In `px` -->
<vue-timepicker input-width="100px"></vue-timepicker>

<!-- In `em` -->
<vue-timepicker input-width="12em" format="HH:mm:ss"></vue-timepicker>
```

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

### Handle @input Event (JS)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Provides the JavaScript methods structure within a Vue component to handle the `@input` event from the vue-timepicker, showing how the event data is received.

```javascript
{
  data () {
    return {
      yourTimeValue: {
        HH: '10',
        mm: '05',
        ss: '00'
      },
      ...
    }
  },

  methods: {
    inputHandler (eventData) {
      console.log(eventData)
    }
  }

}
```

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

### Enabling Input Autocomplete on vue-timepicker (HTML)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Demonstrates how to enable and set the `autocomplete` attribute on the timepicker's input field. Note that the `manual-input` prop must also be enabled for this feature to work.

```html
<!-- In Vue Template -->
<vue-timepicker name="starttime" autocomplete="on" manual-input></vue-timepicker>
```

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

### Initializing Data for Input Focus State in Vue2 Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Defines a data property `focusState` within a Vue component's data function to track whether the timepicker's input element currently has focus or is blurred.

```javascript
data () {
  return {
    focusState: 'blurred'
  }
}
```

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

### Setting Input id, name, and tabindex on vue-timepicker (HTML)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Demonstrates how to set the `id`, `name`, and `tabindex` attributes on the underlying input element of the `vue-timepicker` component using props in a Vue template. These props are assigned directly to the generated `<input type="text">`.

```html
<!-- id -->
<vue-timepicker id="myFirstPicker"></vue-timepicker>

<!-- name -->
<vue-timepicker name="nameInForm"></vue-timepicker>

<!-- tabindex -->
<vue-timepicker :tabindex="5"></vue-timepicker>
```

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

### Handling focus and blur Events in Vue2 Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Demonstrates using the `@focus` and `@blur` event listeners on the `vue-timepicker` component to update a data property (`focusState`), particularly useful when `manual-input` and `hide-dropdown` are enabled.

```html
<p>Focus State: {{focusState}}</p>

<vue-timepicker manual-input hide-dropdown @focus="focusState = 'focused'" @blur="focusState = 'blurred'"></vue-timepicker>
```

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

### Setting input-class Prop in Vue2 Timepicker (String)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows how to apply a single CSS class to the input element within the vue-timepicker component using the `input-class` prop with a String value.

```html
<!-- Set your own `input-class` in the Vue template -->
<vue-timepicker input-class="my-awesome-picker"></vue-timepicker>
```

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

### Enabling Advanced Keyboard Support in Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Enables advanced keyboard navigation features like Arrow Keys, Space, and Enter for selecting items within the dropdown. Note that this attaches additional keyboard event listeners.

```html
<vue-timepicker advanced-keyboard></vue-timepicker>
```

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

### Handle @change Event (JS)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Provides the JavaScript methods structure within a Vue component to handle the `@change` event, showing how the event data and custom arguments are received.

```javascript
// A: No argument
changeHandler (eventData) {
  console.log(eventData)
  // -> {data: {HH:..., mm:... }, displayTime: "HH:mm"}
}

// B: Custom arguments
otherChangeHandler (eventData, yourArg1, yourArg2) {
  console.log(eventData)
  // -> {data: {HH:..., mm:... }, displayTime: "HH:mm"}
  console.log(yourArg1)
  // -> 'foo'
  console.log(yourArg2)
  // -> 42
}
```

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

### Bind Partially-Known Value with v-model (HTML)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows binding the vue-timepicker component to data properties containing partially-known time values, demonstrating usage with both Object and String formats.

```html
<!-- OBJECT FORM -->
<!-- Default 24-Hour -->
<vue-timepicker v-model="timeValue"></vue-timepicker>
<!-- 12-Hour with seconds -->
<vue-timepicker v-model="timeValueWithSec" format="h:mm:ss A"></vue-timepicker>

<!-- STRING FORM -->
<!-- Default 24-Hour + String value -->
<vue-timepicker v-model="stringTimeValue"></vue-timepicker>
<!-- 12-Hour with seconds + String value -->
<vue-timepicker v-model="stringTimeValueWithSec" format="h:mm:ss A"></vue-timepicker>
```

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

### Including VueTimepicker in Vue Component

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

This JavaScript snippet shows how to register the imported VueTimepicker component within the `components` option of a Vue instance or component definition.

```javascript
var yourComponent = new Vue({
  components: { VueTimepicker },
  ...
})
```

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

### Enable Debug Mode - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Enables debug mode for the timepicker component. This outputs extra `DEBUG:` logs to the console to help developers investigate input/output processes and potential issues.

```html
<vue-timepicker debug-mode></vue-timepicker>
```

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

### Defining Second Range with Interval in Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Combines `second-range` with `second-interval` to limit available seconds and apply an interval. The customized interval takes priority. Requires specifying the format to include seconds.

```html
<!-- Second range + 10-second interval-->
<vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]" :second-interval="10"></vue-timepicker>
```

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

### Associating Label with Vue2 Timepicker (HTML)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/CHANGELOG.md

This HTML snippet demonstrates how to link a standard HTML label element to the vue-timepicker component using the 'for' attribute on the label and the 'id' attribute on the component, improving accessibility.

```HTML
<!-- Sample -->
<label for="yourID">Your Label Text</label>
<vue-timepicker id="yourID"></vue-timepicker>
```

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

### Defining Second Range in Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Limits the available seconds in the picker using the `second-range` parameter. Requires specifying the format to include seconds. Accepts an array of numbers and nested arrays.

```html
<!-- Second range -->
<vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]"></vue-timepicker>
```

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

### Enabling Manual Input in Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Allows users to manually enter or change time values directly in the input box next to the dropdown picker.

```html
<vue-timepicker manual-input></vue-timepicker>
```

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

### Defining Minute Range with Interval in Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Combines `minute-range` with `minute-interval` to limit available minutes and apply an interval. The customized interval takes priority over the range for determining displayed values.

```html
<!-- Minute range + 5-minute interval -->
<vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]" :minute-interval="5"></vue-timepicker>
```

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

### Drop Direction Auto Default Container - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows the default behavior for `drop-direction="auto"` when `container-id` is not set. The timepicker calculates available space based on `document.body`.

```html
<vue-timepicker drop-direction="auto"></vue-timepicker>
```

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

### Implementing Error Event Handler in Vue2 Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Provides the JavaScript `data` property initialized with a value that will trigger an error based on the component's constraints, and defines the `errorHanlder` method to receive and log the array of invalid fields emitted by the `@error` event.

```javascript
data () {
  return {
    erroredInputSample: { H: '5', mm: '03', ss: '00' }
    // NOTE:
    // H: '5' -> invalid. Value is not in the `hour-range` list
    // mm: '03' -> invalid. Value does not fit in the `minute-interval`
    // ss: '00' -> valid.
  }
},

methods: {
  errorHanlder (eventData) {
    console.log(eventData)
    // console.log outputs -> ["hour", "minute"]
  }
}
```

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

### Defining Minute Range in Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Limits the available minutes in the picker using the `minute-range` parameter, similar to `hour-range`. Accepts an array of numbers and nested arrays.

```html
<!-- Minute range -->
<vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]"></vue-timepicker>
```

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

### Setting Manual Input Timeout in Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Works with `manual-input` mode. Sets the timeout in milliseconds for continuous input before the entered value is processed. Defaults to 1000ms.

```html
<!-- Unit: million second -->
<vue-timepicker :manual-input-timeout="1500"></vue-timepicker>
```

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

### Setting Blur Delay for Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Sets the blur delay time for the dropdown in milliseconds before it closes. Defaults to 300ms if not set.

```html
<!-- Unit: million second -->
<vue-timepicker :blur-delay="500"></vue-timepicker>
```

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

### Drop Direction Auto with Offset Height - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Sets the dropdown direction to auto and customizes the minimum required space below the input (`drop-offset-height`) before the dropdown opens upwards. Defaults to 160px.

```html
<vue-timepicker drop-direction="auto" :drop-offset-height="200"></vue-timepicker>
```

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

### Hide Dropdown - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Configures the vue-timepicker component to hide the dropdown picker by default. Requires `manual-input` mode to be enabled. Users can still open the dropdown via the button.

```html
<vue-timepicker manual-input hide-dropdown></vue-timepicker>
```

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

### Hide Clear Button (HTML)

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Demonstrates how to use the `hide-clear-button` prop to disable the clear button in the vue-timepicker component.

```html
<vue-timepicker hide-clear-button></vue-timepicker>
```

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

### Append Dropdown To Body - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Appends the dropdown menu directly to the document `<body>`. Use this option to resolve `z-index` or `overflow` layout issues with the dropdown positioning.

```html
<vue-timepicker append-to-body></vue-timepicker>
```

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

### Lazy Event Mode - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Enables lazy event mode. `input` and `change` events are only emitted on actual user interactions (picking, clearing, manual input), not on programmatic changes or component mount.

```html
<vue-timepicker lazy></vue-timepicker>
```

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

### Drop Direction Auto - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Sets the dropdown direction to automatically detect available space. It will open upwards if there isn't enough space below the input.

```html
<vue-timepicker drop-direction="auto"></vue-timepicker>
```

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

### CSS Override Appended Dropdown - vue2-timepicker - CSS

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows how to override the background color for selected items when `append-to-body` IS used. Targets the `.vue__time-picker-dropdown` class.

```css
/* When using "append-to-body" */
.vue__time-picker-dropdown ul li:not([disabled]).active {
  background: steelblue;
}
```

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

### Binding VueTimepicker Interval

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

You can bind the interval props to data variables in your Vue component, allowing for dynamic interval changes.

```html
<!-- Bind interval config with your own data variable -->
<vue-timepicker :minute-interval="yourMinuteInterval"></vue-timepicker>
```

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

### CSS Override Default Dropdown - vue2-timepicker - CSS

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Shows how to override the background color for selected items in the default dropdown when `append-to-body` is NOT used. Targets the `.vue__time-picker .dropdown` class.

```css
/* Default override (not using "append-to-body") */
.vue__time-picker .dropdown ul li:not([disabled]).active {
  background: steelblue;
}
```

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

### Closing Vue Timepicker on Complete

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Automatically close the dropdown when the user finishes selecting all of the required fields.

```html
<vue-timepicker close-on-complete></vue-timepicker>
```

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

### Drop Direction Auto with Container ID - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Sets the dropdown direction to auto and specifies a parent container ID (`auto-dropdown-containter`) for calculating available space. Useful when the timepicker is within a scrollable container.

```html
<vue-timepicker drop-direction="auto" container-id="auto-dropdown-containter"></vue-timepicker>
```

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

### Drop Direction Up - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Sets the dropdown direction to always open upwards, above the input field. This overrides the default "down" direction.

```html
<vue-timepicker drop-direction="up"></vue-timepicker>
```

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

### Fixed Dropdown Button - vue2-timepicker - HTML

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Configures the vue-timepicker component to make the dropdown button always visible in the UI.

```html
<vue-timepicker fixed-dropdown-button></vue-timepicker>
```

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

### Enabling Auto-Scroll in Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Auto-scrolls to selected values when the dropdown opens. This works for both programmatically defined values (e.g., from v-model) and values manually picked by the user.

```html
<vue-timepicker auto-scroll></vue-timepicker>
```

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

### Disabling Vue Timepicker

Source: https://github.com/phoenixwong/vue2-timepicker/blob/master/README.md

Fully disable both the dropdown picker and the "&times;" clear button in the UI, preventing users from changing any values.

```html
<vue-timepicker disabled></vue-timepicker>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.