7 Best Duration Pickers In JavaScript (2023 Update)

by jQueryScript,

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 28 2023

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

Minimal Duration Picker Plugin For jQuery and Bootstrap

[Demo] [Download]


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

Easy Duration Picker In Vanilla JavaScript – html-duration-picker.js

[Demo] [Download]


3. Easy Responsive jQuery Duration Picker Plugin - duration-picker.js

A lightweight, responsive, user-friendly jQuery duration picker which enables the user to quickly input a duration in hours, minutes and seconds.

Easy Responsive jQuery Duration Picker Plugin - duration-picker.js

[Demo] [Download]


4. Human-readable Duration Picker Widget For jQuery UI - timeDurationPicker

A human-friendly jQuery UI time & duration picker which allows the user to pick duration in years, months, days, hours, minutes and seconds.

Human-readable Duration Picker Widget For jQuery UI - timeDurationPicker

[Demo] [Download]


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

Set Duration In Days, Hours And Minutes - durationPicker.js

[Demo] [Download]


6. Tiny JavaScript Library For Selecting Duration – DurationPickerMaker

A user-friendly duration (total seconds) picker written in vanilla JavaScript.

Tiny JavaScript Library For Selecting Duration – DurationPickerMaker

[Demo] [Download]


7. Calculate Duration Between 2 Times - differenceHours

A minimal jQuery plugin which compares the difference between 2 times and calculates/displays the duration in hours and minutes on the page.

Calculate Duration Between 2 Times - differenceHours

[Demo] [Download]


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: