7 Best Duration Pickers In JavaScript (2026 Update)
What Is Duration Picker?
A duration picker allows the user to select a duration representing how long something lasts, from beginning to end.
It typically provides a user-friendly interface that makes it easy to pick a duration (in days, hours, minutes, seconds) between two times and dates.
The Best Duration Picker
In this post, you will find out the 7 best jQuery and Vanilla JavaScript plugins to quickly implement a duration picker on your next web project. Have fun with it.
Originally Published Aug 20 2020, updated Feb 17 2026
1. User-friendly Time/Duration Picker In jQuery - fxtime.js
A user-friendly and accessible jQuery time/duration picker plugin that provides a Firefox-like time selection experience where you can select a time by filling in the hours, minutes, and seconds, one slot at a time.
The plugin ensures your time inputs are correct through its verification system and neatens your inputs with automatic formatting. It also adapts to either a 12- or 24-hour clock, depending on your browser's locale. This means no more toggling between formats or worrying about AM/PM distinctions.
Furthermore, fxtime automatically focuses on the first empty slot upon entry. As you fill in each slot, the focus automatically advances to the next to provide a smooth flow.
2. Minimal Duration Picker Plugin For jQuery and Bootstrap
A jQuery & Bootstrap plugin that converts a normal text field into a duration picker allowing the user to set a duration in time.
3. Set Duration In Days, Hours And Minutes - durationPicker.js
A lightweight and configurable duration picker plugin that automatically calculates the duration (in seconds) between two dates & times.
The plugin generates Days, Hours, and Minutes select dropdowns on the webpage and returns the duration (in seconds) after you select a date & time.
4. Easy Duration Picker In Vanilla JavaScript – html-duration-picker.js
A pure JavaScript duration picker that allows the user to pick duration (in hours, minutes, seconds) in a normal input field.
5. Horizontal Duration Picker For jQuery - timeBar.js
A creative jQuery duration picker plugin which makes it easy to select a time duration in seconds from a horizontal time bar with custom scales and markers.
6. User-friendly Duration Picker Plugin With jQuery
A simple, user-friendly jQuery duration & time picker plugin which allows the user to pick duration in hours and minutes with increment / decreament buttons and keyboard interactions.
7. Tiny JavaScript Library For Selecting Duration – DurationPickerMaker
A user-friendly duration (total seconds) picker written in vanilla JavaScript.
More Resources:
Seeking more jQuery plugins or JavaScript libraries to create awesome duration pickers on the web & mobile? See jQuery Duration Picker and JavaScript Duration Picker sections for more details.
See Also:
- 10 Best Date And Timer Pickers In Vanilla JavaScript
- 10 Best Date And Time Picker JavaScript Plugins
- 10 Best Date Picker Libraries For Angular.js
- 10 Best Date Picker Components For Vue.js
