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