DOCSEARCHbyAlgolia
Submit Docs

vue2-timepicker

repository·master·Indexed 19 days ago

https://github.com/phoenixwong/vue2-timepicker

A dropdown time picker component for Vue 2.x (version 1.1.6) that supports flexible time formatting for hours, minutes, seconds, and AM/PM. It features both Object and String data binding via v-model, customizable picker intervals, range restrictions, and manual input mode. The library includes support for Server-Side Rendering (SSR), advanced keyboard navigation, and customizable slots for icons and buttons.

Tokens
6.5K
Snippets
31
Records
33
Agent score
65%

What's inside vue2-timepicker

  1. Handle new change event data structure

    master

    The data structure returned by the change event has changed in Vue 2.x:

    1. No Array Wrapper: The Vue 1.x version wrapped the event data in an array []. The Vue 2.x version returns the object directly.
    2. Full Value Package: Unlike Vue 1.x, which only returned predefined tokens, the Vue 2.x version always returns a full object containing all supported time tokens (e.g., HH, H, hh, h, mm, m, ss, s, a, A, etc.).
    // Vue 1.x data structure
[
  {
    data: {
      HH:...,
      mm:...
    }
  }
]

// Vue 2.x data structure
{
  data: {
    HH:...,
    mm:...
  }
}

  2. Bind values with `v-model` (Object and String formats)

    master

    Since v1.0.0+, v-model supports both Object and String formats.

    Object Format (Default)

    An object where keys correspond to the format tokens (e.g., { HH: '10', mm: '05' }).

    String Format

    A formatted string (e.g., '10:05:00').

    Initial Values

    • Empty: Use {} (Object), undefined, null, or '' (String).
    • Partial: You can provide partial values like { HH: '20', mm: '' } or '20:mm'.
    // Object form
const yourTimeValue = { HH: '10', mm: '05', ss: '00' };

// String form
const yourStringTimeValue = '10:05:00';
    <!-- Using Object form -->
<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss"></vue-timepicker>

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

  5. Get Started with VueTimepicker

    master

    To use the component, follow these three steps:

    1. Import the component and its CSS (see Importing guide).
    2. Register the component in your Vue instance.
    3. Use the <vue-timepicker> tag in your template.
    // Step 2: Include in your component
var yourComponent = new Vue({
  components: { VueTimepicker },
  ...
})
    <!-- Step 3: Use in template -->
<vue-timepicker></vue-timepicker>

  6. Use append-to-body to fix layout issues

    master

    If you encounter z-index or overflow: hidden issues with the dropdown, use the append-to-body prop to move the dropdown menu to the end of the <body>.

    CSS Overrides: When using append-to-body, the dropdown's CSS class changes from .vue__time-picker .dropdown to .vue__time-picker-dropdown. You must update your custom styles accordingly.

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

/* Example CSS override for appended dropdown */
.vue__time-picker-dropdown ul li:not([disabled]).active {
  background: steelblue;
}

  7. Enable Autocomplete in Manual Input Mode

    master

    To use the autocomplete attribute, you must enable manual-input mode. This allows the component to follow browser autofill rules by assigning the attribute to the internal text input. For best results, ensure the component also has a name or id attribute.

    <vue-timepicker name="starttime" autocomplete="on" manual-input></vue-timepicker>

  8. Migrate from Vue 1.x vue-timepicker to Vue 2.x

    master

    When upgrading from the Vue 1.x version of vue-timepicker to the Vue 2.x version, several breaking changes in how data binding and events work must be addressed due to changes in the underlying Vue framework.

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

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

  11. Replace :time-value.sync with v-model

    master

    In Vue 2.x, the .sync modifier is deprecated for this component. Replace :time-value.sync="yourTimeValue" with v-model="yourTimeValue" to handle two-way data binding.

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

  12. Update change event handler arguments

    master

    If your @change event handler uses custom arguments, you must replace the Vue 1.x $arguments parameter with $event in your template.

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

<!-- Vue 2.x version -->
<vue-timepicker v-model="yourTimeValue" @change="changeHandler($event, 'foo', 'bar')"></vue-timepicker>