Circular SVG Timer Range Picker Plugin With jQuery

File Size: 3.27 KB
Views Total: 3372
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Circular SVG Timer Range Picker Plugin With jQuery

A pretty cool jQuery timer picker plugin which enables the user to select a time range from a circular SVG based clock interface. 

How to use it:

1. Create a SVG based clock for the time range picker.

<svg width="300" height="300" class="circle-datepicker">
  <circle cx="150" cy="150" r="100" stroke="#ddd" fill="none" stroke-width="24" />
  <circle class="circle-datepicker__start" cx="150" cy="150" r="12" fill="#000" />
  <circle class="circle-datepicker__end" cx="150" cy="150" r="12" fill="#000" />

2. The plugin requires the latest version of jQuery library loaded properly in the webpage.

<script src="//"></script>
<script src="jquery-circle-datepicker.js"></script>

3. Initialize the time range picker with default options.


4. Output the user selected start/end times as follows:

$('.circle-datepicker').on('change', function(e, data){
  $('p').html('start: ' + data[0] + 'end: ' + data[1]);

5. Default plugin settings:

  start: 9,
  end: 17,
  step: 15,
  width: 300,
  height: 300,
  step_mins: 15

This awesome jQuery plugin is developed by antejan. For more Advanced Usages, please check the demo page or visit the official website.