vue-simple-timepicker

simple time picker

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-simple-timepicker
1.0.25 years ago5 years agoMinified + gzip package size for vue-simple-timepicker in KB

Readme

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:
: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>