Datedropper
A UI datepicker
TimeDropper
Timedropper is a modern, lightweight, and customizable UI time picker, offering an intuitive and accessible solution for selecting time in web applications.
7.9k downloads 😍
How to use Timedropper
Easily install and use Timedropper on your web app.
- 1
Link plugin library to your web page's resources
<head>
<!-- timedropper lib -->
<script src="timedropper-javascript.js"></script>
</head> - 2
Initialize the plugin on a page element
<input id="myInput">
<!-- timedropper init -->
<script>new timeDropper('#myInput');</script>
- 1
Link plugin library to your web page's resources
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- timedropper -->
<script src="timedropper-jquery.js"></script>
</head> - 2
Initialize the plugin on a page element
<input id="myInput">
<!-- timedropper init -->
<script>$('#myInput').timeDropper();</script>
What features does Timedropper include
Timedropper combines convenience, time-saving, and extensive customization.
![Easy-to-use interface]()
Easy-to-use interface
This time picker has a user-friendly interface that makes it easy for anyone to select the desired time.
![Custom date formats]()
Custom date formats
This time picker is fully responsive and works seamlessly on all mobile devices.
![Mobile compatibility]()
Mobile compatibility
This time picker is compatible with all major web browsers, including Chrome, Firefox, Safari, and Internet Explorer.
![Customizable theme]()
Customizable theme
This time picker allows users to choose from a variety of customizable themes, so they can match the look and feel of their website or application.
What accessibility features does Timedropper include
Timedropper provides an inclusive and user-friendly experience for everyone!
Keyboard Navigation
Navigate through Timedropper with ease using only your keyboard. Intuitive key bindings allow you to open the time picker, move between options, and make selections without needing a mouse or touch input.
Managed Focus
Our time picker is designed to manage focus effectively, ensuring a smooth and predictable user experience. As you interact with Timedropper, focus automatically moves to relevant elements, preventing confusion and creating a clear navigation path.
Collision Aware
Timedropper intelligently adapts to its environment, ensuring the time picker never appears off-screen or overlaps important content. This feature enhances usability and ensures accessibility by keeping the interface visually accessible at all times.
Alignment Control
Full control over the alignment of the time picker ensures it suits any layout. Whether aligned to the top, bottom, or sides, Timedropper accommodates varying interfaces and maintains its usability across devices.
Screen Reader Support
Designed with assistive technologies in mind, Timedropper is fully compatible with screen readers. Each element is properly labeled and described, allowing visually impaired users to navigate and interact with the time picker effortlessly.
Accessibility features are included only from the javascript version 1.X
Why use Timedropper
Timedropper simplifies accurate time input for users.
Its user-friendly design and intuitive interface make it a valuable time picker for anyone looking to save time and reduce errors when selecting a specific time, commonly used in scheduling applications, online forms, and event planning.
How to get Timedropper
Get Timedropper for free now and experience the difference!
jQuery
Version: 1.2.0
- Full jQuery features access
- No accessibility features
Last release 2024-09-03
New versionGet it now
Javascript
Version: 1.0.0
- Full javascript features access
- Accessibility features
Last release 2025-01-27
7.9k downloads 😍
See also...
38.7kDatedropper
Inline
A simple WYSIWYG editor
411Inline
Add to Calendar
A save the date button
136Add to Calendar