Vue.js Circular Time Range Picker

by

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

JS

Call the component and enable time picker



CSS

Styling time picker

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.


Published by Rohit