Minimal Responsive Time Range Picker Plugin - jQuery Timescale

Timescale is a simple, lightweight time picker jQuery plugin that enables you to quickly select a time range on a customizable and responsive time ruler interface.

Its customizable scales allow you to define the time increments and intervals that suit your specific needs.

See Also:

• 10 Best Date And Time Picker JavaScript Plugins

How to use it:

1. Add the jQuery Timescale plugin's files to the webpage.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<link rel="stylesheet" href="/path/to/jquery.timescale.css">
<script src="/path/to/jquery.timescale.min.js"></script>

2. Create an empty container to hold the time ruler.

<div id="timescale-demo"></div>

3. Initialize the plugin to create a default time range picker.

$(function(){
  $('#timescale-demo').timescale({
    // options here
  });
});

4. Get the selected time range with the scale_click_func callback.

$(function(){
  $('#timescale-demo').timescale({
    scale_click_func:function(o,start_time,end_time){
      alert(start_time+'--'+end_time);
    }
  });
});

5. Available options to customize the scales.

$(function(){
  $('#timescale-demo').timescale({
    minute_gap: 15,
    value_gap: 2,
    long_scale_height: 32,
    short_scale_height: 24,
    offset: 4
  });
});

---

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