phoenixwong / vue2-timepicker

A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support
https://phoenixwong.github.io/vue2-timepicker/
MIT License
432 stars 193 forks source link

There should be an option for limit tim. #40

Closed tripathi-swapnil closed 5 years ago

tripathi-swapnil commented 7 years ago

There should be an option for limit time. If i want to show only morning time so i can show only time till 12. If this option exists please share.

paladosss commented 7 years ago

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: { 
    timeFrom: 10, 
    timeTo : 20,
  },

  mutations: {
    TIME_ORDER (state, payload){
      state.timeFrom = payload;
      state.timeTo = payload;
    },
  }
})

vue-timepicker.vue

computed: {
 timeFrom() {
      return this.$store.state.timeFrom;
    },

    timeTo() {
      return this.$store.state.timeTo;
    }
},

methods: {
   renderHoursList () {
      const hoursCount = this.timeTo
      this.hours = []
      for (let i = this.timeFrom; i < hoursCount; i++) {
        this.hours.push(this.formatValue(this.hourType, i))
      }
    },
}
tripathi-swapnil commented 6 years ago

@paladosss and if i am not using vuex then ?

phoenixwong commented 5 years ago

Sorry for the long wait. The latest version v0.2.0 [#66] release support for hour-range and hide-disabled-hours. Please give it a try.

If you want to show morning hours, like from 8 to 12 for example:

<!-- 24-Hour Format -->
<vue-timepicker :hour-range="[[8, 12]]"></vue-timepicker>
<!-- Equalvant to: -->
<vue-timepicker :hour-range="[8, 9, 10, 11, 12]"></vue-timepicker>

<!-- 24-Hour Format + Hide Disabled Hour Ranges -->
<vue-timepicker :hour-range="[[8, 12]]" hide-disabled-hours></vue-timepicker>
phoenixwong commented 5 years ago

Duplicate of #63