Timedropper Javascript is a versatile and highly customizable timepicker library designed for seamless integration and an elegant design. Follow these steps to get started:
Default Installation
How to Install
Download the Timedropper source file for direct integration into your HTML project.
Add the timedropper-javascript.js file to the <head> section of the pages where you plan to use Timedropper. Here’s an example:
<head>
...
<!-- timedropper -->
<script src="timedropper-javascript.js"></script>
</head>
How to Initialize
Once the installation is complete, you need to initialize Timedropper for the elements that will trigger the timepicker. While it is commonly used with input fields, you can apply it to any selector, such as buttons or links. There are two ways to initialize Timedropper:
Default Initialization
Add a default class to the element you want to use with Timedropper, and it will automatically initialize on page load. You can customize its behavior by using data attributes options.
<input class="timedropper-default">Custom Initialization
Alternatively, you can define the timepicker programmatically. Here’s an example:
<input type="time">
<!-- timedropper init -->
<script>
new timeDropper('input[type="time"]');
</script>
Make sure to initialize Timedropper only after the target element is on the page or once the page has fully loaded.
WordPress Installation
Timedropper can also be installed on WordPress websites with ease. Follow these steps to set it up:
Steps to Install the Plugin on WordPress:
1. Log in to Your WordPress Dashboard
Go to http://yourdomain.com/wp-admin and log in using your credentials.
2. Navigate to the Plugins Section
From the left-hand sidebar, click on Plugins, then select Add New.
3. Upload the Plugin
Click the Upload Plugin button at the top, select the timedropper-javascript.zip file, and click Install Now.
4. Activate the Plugin
Once the installation is complete, click the Activate button to enable the plugin.
5. Test the Plugin
The plugin is now active and ready to use. To test it, add the following custom HTML code to any part of your WordPress site:
<input class="timedropper-default">Accessibility Features
Timedropper is designed to provide an inclusive and user-friendly experience for everyone. Here’s how it ensures accessibility:
Keyboard Navigation
Timedropper can be fully navigated using just the keyboard. You can open the timepicker, move between options, and make selections effortlessly with intuitive key bindings.
Managed Focus
The timepicker manages focus dynamically, ensuring smooth and predictable navigation. As you interact, focus is directed to relevant elements, minimizing confusion and simplifying the experience.
Collision Awareness
Timedropper intelligently adjusts its position to avoid being displayed off-screen or overlapping critical content. This ensures it remains visible and easy to use in any context.
Alignment Control
You have complete control over the timepicker’s alignment. Whether you need it at the top, bottom, or sides, Timedropper adapts to fit your layout perfectly.
Screen Reader Support
Timedropper is fully compatible with screen readers. Every element is appropriately labeled, making it accessible for visually impaired users to navigate and interact with confidence.