vue-time-picker-bootstrap

Vue Time Picker

A simple time picker for Vue with a Bootstrap style.

CSS Style Sheet: https://github.com/JustinDowty/VueTimePicker/blob/master/src/vue-tp-style.css

Install

npm i vue-time-picker-bootstrap

Usage

import TimePicker from 'vue-time-picker-bootstrap'
export default {
  name: 'app',
  components: {
    TimePicker
  },
  // ...
}

Then in your template

<TimePicker v-model="yourVar"></TimePicker>

Or you can include it directly with a script

<script src="https://www.unpkg.com/vue-time-picker-bootstrap/index.js"></script>
<script>
  // Add this before instantiating your Vue instance
  Vue.use(TimePicker);
  
  var vm = new Vue({
  // ...
</script>

You can also link the style sheet in the Head of your HTML

<link rel="stylesheet" type="text/css" href="http://unpkg.com/vue-time-picker-bootstrap/vue-tp-style.css">

Time is returned as hh:mm:ss a

Demo

Demo is available at https://justindowty.herokuapp.com/vuetimepicker