🕐 jQuery Timesetter

A modern, elegant jQuery plugin for intuitive time input controls.
Built with Bootstrap 5, featuring real-time validation and keyboard navigation.

jQuery 3.7.1+ Bootstrap 5.3.3 Mobile Responsive MIT License

Try Live Demo View on GitHub

✨ Why Choose jQuery Timesetter?

Experience the perfect blend of functionality and elegance

🎯

Intuitive Design

Clean, modern interface with up/down controls that users instantly understand. No learning curve required.

⌨️

Keyboard Support

Full keyboard navigation with arrow keys for quick time adjustments. Perfect for power users and accessibility.

✅

Smart Validation

Real-time validation with intelligent error correction. Invalid values are automatically adjusted to valid ranges.

📱

Mobile Ready

Fully responsive design built on Bootstrap 5. Works perfectly on desktops, tablets, and mobile devices.

🎨

Highly Customizable

Extensive configuration options for styling, behavior, validation rules, and display formats.

🚀

Lightweight

Minimal footprint with maximum functionality. Easy integration with just a few lines of code.

🎮 Interactive Examples

See jQuery Timesetter in action with real-world scenarios

💼 Business Hours Picker

Perfect for scheduling applications and business hour management

Loading demo...

Interactive Demo: Please enable JavaScript to see the working time picker.

                            $(".business-hours").timesetter({
                            hour: { value: 9, min: 8, max: 18, symbol: "h" },
                            minute: { value: 0, step: 30, symbol: "min" },
                            postfixText: " (Business Hours)"
                            });
                        

⏱️ Meeting Duration

Ideal for meeting schedulers and time tracking applications

Loading demo...

                            $(".duration").timesetter({
                            hour: { value: 1, min: 0, max: 8, symbol: "hr" },
                            minute: { value: 30, step: 15, symbol: "min" },
                            postfixText: " Duration"
                            });
                        

🌅 Daily Schedule

Start and end time picker for daily planning

                            // Start Time
                            $(".start-time").timesetter({
                            hour: { value: 9, symbol: "h" },
                            minute: { value: 0, step: 15, symbol: "m" }
                            });

                            // End Time
                            $(".end-time").timesetter({
                            hour: { value: 17, symbol: "h" },
                            minute: { value: 0, step: 15, symbol: "m" }
                            });
                        

🎯 Basic Time Picker

Simple time input with default settings

Loading demo...

                            // Simple initialization
                            $(".time-picker").timesetter();

                            // Get values
                            var hours = $(".time-picker").timesetter().getHoursValue();
                            var minutes = $(".time-picker").timesetter().getMinutesValue();
                        

🚀 Quick Installation

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"> <link href="css/jquery.timesetter.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="js/jquery.timesetter.js"></script>  <div id="my-timepicker"></div> <script> $("#my-timepicker").timesetter(); </script>

That's it! You're ready to go in less than 2 minutes.

🕐 jQuery Timesetter

✨ Why Choose jQuery Timesetter?

Intuitive Design

Keyboard Support

Smart Validation

Mobile Ready

Highly Customizable

Lightweight

🎮 Interactive Examples

💼 Business Hours Picker

⏱️ Meeting Duration

🌅 Daily Schedule

🎯 Basic Time Picker

🚀 Quick Installation

Ready to Get Started?