Simple customizable Vue.js timepicker component

vue-timeselector

? Simple customizable Vue.js timepicker component.

Install

npm install vue-timeselector --save

or

yarn add vue-timeselector

import Timeselector from 'vue-timeselector';

export default {
  // ...
  components: {
    Timeselector
  }
  // ...
}

Usage

Basic Usage

<!-- Default to 24-Hour format HH:mm -->
<timeselector></timeselector>

value prop if passed should be a Date object in order to pass a preconfigured time or Null if you want to set the picker default time as 00:00.

<script>
export default {
  components: { Timeselector },
  data() {
    return {
      time: new Date() // or null
    }
  }
}
</script>
<timeselector :value="time"></timeselector>

Using v-model

<datepicker v-model="time"></datepicker>

Support name attribute for normal html form submission

<datepicker :value="time" :name="uniquename"></datepicker>

Support id attribute as well

<datepicker :value="time" :id="uniqueid"></datepicker>

Make a use of state attributes like disabled or required

<datepicker :value="time" :required="true" :disabled="false"></datepicker>

Choose a placeholder as default views (need more tests)

<datepicker :value="time" :placeholder="'Select a time'"></datepicker>

Emits events

<datepicker :value="time" @input="myInputFunc" @opened="myOpenFunc" @closed="myCloseFunc">

Custom modal

• displayHours
• displayMinutes
• displaySeconds

Customized Time Format

• displayed
• returned
• utc
• separator

...

12 Hours in modal

...

Interval in modal

...

Highligth time

...

Disable time

...

Slot (TODO)

...

Style sdelector (TODO)

Use classes to curstomize elements

Classes structure

vue-timeselector is built following BEM guidelines so it's easy for everyone to overrides the component's styles for each elements and their modifiers. Here is that classes structure.

Block - Elements

| .vtimeselector
|
|----- .vtimeselector__input
|----- .vtimeselector__box
|      |
|      | ----- .vtimeselector__box__list .vtimeselector__box__list--hours
|      |       |
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--hours
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--hours
|      |       | ----- ...
|      |
|      | ----- .vtimeselector__box__list .vtimeselector__box__list--minutes
|      |       |
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--minutes
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--minutes
|      |       | ----- ...
|      |
|      | ----- .vtimeselector__box__list .vtimeselector__box__list--seconds
|      |       |
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--seconds
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--seconds
|      |       | ----- ..
|      |
|      | ----- .vtimeselector__box__list .vtimeselector__box__list--ampm
|      |       |
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--ampm
|      |       | ----- vtimeselector__box__item .vtimeselector__box__item--ampm
|      |       | ----- ...

Mofifiers

• .vtimeselector__input--is-open: Modifier displayed on .vtimeselector__input element when the modal is opened

• .vtimeselector__box--is-closed: Modifier displayed on .vtimeselector__box element when the modal is closed

• .timeselector__box__item--is-highlighted: Modifier displayed on .timeselector__box__item element when the item is highlighted

• .timeselector__box__item--is-selected: Modifier displayed on .timeselector__box__item element when the item is selected

• .timeselector__box__item--is-disabled: Modifier displayed on .timeselector__box__item element when the item is disabled

Available props

Events

These events are emitted on actions in the timepicker

Time formatting

String formatter

GitHub