vue-time-ranges-picker is a Vue.js component to determine the time breaks of the day. Built with SVG events and an indicator.

vue date range picker, vue 3 time picker, vue clock picker, vue3 date time picker npm, vue 3 datepicker example, vue 3 datepicker on change

How to make use of it:

Install & Download:

npm install vue-time-ranges-picker

Usage

<template>
  <div>
    <div class="time-picker-wrapper">
      <VueTimeRangesPicker
        :value="ranges"
        @change="handleRangesChange"
      />
    </div>
  </div>
</template>

<script>
import VueTimeRangesPicker from 'vue-time-ranges-picker';

export default {
  components: {
    VueTimeRangesPicker
  },

  data() {
    return {
      ranges: [
        {
          startTime: '00:00',
          endTime: '03:00',
          scaleColor: 'violet',
        },
        {
          startTime: '03:00',
          endTime: '06:00',
          scaleColor: 'yellow',
        },
        {
          startTime: '06:00',
          endTime: '00:00',
          scaleColor: 'aquamarine',
        }
      ]
    }
  }
}
</script>

Props

value :arrayOf(object)

The array contains default intervals of time with scale color for each of them.

isTwelfthMode :boolean, default: false

Set this value to true if you want to work with a picker in the twelfth format. If it is true, data should be in the twelfth format too.

stepOfMoving :number, default: 0.5

This param controls the minimum hour’s step for moving.

extraPointerRadius :number, default: 70

The user can’t always get directly to the pointer to start the movement. The parameter is used to indicate an additional, invisible radius for the pointer, which, when hit, begins the movement.

circular time range picker for vue js Plugin/Github

See Demo And Download

Official Website(alex-knyazev): Click Here

This superior jQuery/javascript plugin is developed by alex-knyazev. For extra advanced usage, please go to the official website.