vue-simple-timepicker

vue-timepicker

Simple vue timepicker

Screenshot

Future

1. Usage props for options the timepicker
2. Switch AM/PM time
3. update styles

Install

npm i vue-simple-timepicker --save

Usage

<template>
  <div id="app">
      <Timepicker v-model="timepicker" :options="pickerSetting"></Timepicker>
      
      <!-- View time -->
      <div>
        {{ timepicker.hours }} : {{ timepicker.minutes }}
      </div>
  </div>
</template>

<script>
  import Timepicker from 'vue-simple-timepicker';

  export default {
    name: 'app',
    components: {Timepicker},
    data() {
        return {
            timepicker: {
                hours: 0,
                minutes: 0,
            },
            pickerSetting: {
              headerShow: false,
            },
        }
    }
  };
</script>

Options

Default Options:

options : {
  headerShow: true, /* Show/Hide Header  */
  headerText: 'Friday Time Picker' /* Text Header a Picker */
};

Usage Custom options:

<Timepicker :options="pickerSetting">

To use the settings you need to send them to the component as shown above

Custom trigger:

<Timepicker :options="pickerSetting">
  <div>Click for show timepicker!</div>
</Timepicker>