vuejs time-range-picker Example – time range picker using Vuejs – timerangepicker

vuejs time-range-picker Example – time range picker using Vuejs – timerangepicker

-Time and time range picker for Vuejs.
-Vuejs-timeRangePicker is a Simple Vuejs Widget that creates simple time or time range picker.
There Are Two Following Function used in jquery with customization vuejs.
1).timePicker()
2).timeRangePicker()
A dropdown time Range picker for Vue 1.x Version with Easy and flexible time Range format support.

We can simple pick a time range display by adding an “is-range” attribute.

<!--Vuejs-timeRangePicker Template -->

  
  


<!-- Vuejs TimeRangePicker Example Scripts-->

  export default {
    data() {
      return {
        livea: [new Date(2018, 9, 10, 8, 40), new Date(2018, 9, 10, 9, 40)]
      };
    }
  }

Example

Vue Timepicker

<!-- Simpple 12-hour sample 1 -->


<!-- Simpple 12-hour sample 2 -->

/*time Range picker*/
var widget = {
    name: "vue-datetimepicker",
    isFit : function(question) { return question.name == 'timerange'; }
}

Vue.component(widget.name, {
    props: ['question', 'css', 'isEditMode'],
    template: "",
    mounted: function () {
        var vm = this
        var widget = $(vm.$el).timepicker({});
        widget.on("change", function (e) {
            vm.question.value = $(this).val();
        });
        vm.question.valueChangedCallback = function() {
            widget.timepicker();
        }
       
    }
})

Example

Example