Minimal Responsive Time Range Picker Plugin - jQuery Timescale
File Size: | 8.24 KB |
---|---|
Views Total: | 203 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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