User-friendly Time Selector - jQuery Timespinner

File Size: 5.09 KB
Views Total: 5571
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
User-friendly Time Selector - jQuery Timespinner

A user-friendly time spinner widget for jQuery UI that makes it easier to increment / decrement time & duration strings using up and down buttons.

See also:

How to use it:

1. Load the needed jQuery, jQuery UI and moment.js libraries in the document.

<script src="" 
<script src=""></script>
<link rel="stylesheet" href="">
<script src=""></script>

2. Load the jQuery Timespinner plugin after jQuery.

<script src="jquery-ui-timespinner.js"></script>

3. Create a normal text field for the time spinner.

<input type="text" name="text" class="demo">

4. Call the plugin on the text field and done.




5. Customize the time format.

  • H: hours
  • m: minutes
  • s: seconds
  format: 'HH:mm'

6. Set the step size. Default: 1

  step: 2

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