Vue.js Circular Time Range Picker

In this post I ma going to share simple Vue Component for selecting time range. This Vue.js component is helpful to select the time intervals of the day.
vue-time-picker

Install

Install component via NPM

npm install vue-time-ranges-picker



Template

Use following template to display Vue.js Circular Time Range Picker

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

JS

Call the component and enable time picker

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



CSS

Styling time picker

<style>
.time-picker-wrapper {
  width: 300px;
}
</style>

Note:

If you want to use this component in browser which doesn’t support pointer events, then enable polyfill. For example,you can add this script in the header of your html page https://code.jquery.com/pep/0.4.3/pep.js

You cal also use following to properties to customize the plugins.

{
  isShowChosenTime: true,
  isShowQuartersText: true,
  isShowHoursMarks: true,
  chosenTimeColor: 'grey',
  pointerColor: 'white',
  activePointerColor: 'rgba(240, 240, 240, 0.9)',
  pointerRadius: 6,
  activePointerRadius: 5.5,
  circleStrokeWidth: 8,
  hoursMarksColor: 'grey',
  quarterTextColor: 'grey',
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by alex-knyazev. Visit their official github repository for more information and follow for future updates.