Datedropper Javascript is a versatile and highly customizable datepicker library plugin, designed for seamless integration and an elegant design. Follow the steps below to get started:
Default Installation
How to Install
Download the Datedropper source file for direct HTML integration.
Add datedropper-javascript.js to the <head> section of the pages where you plan to use Datedropper. Here’s an example:
<head>
...
<!-- Datedropper -->
<script src="datedropper-javascript.js"></script>
</head>How to Initialize
After installation, you need to initialize Datedropper on the elements that will trigger the datepicker. While it’s typically initialized on input fields, you can use any selector, such as buttons or links. Initialization can be done in two ways:
Default Initialization
To initialize by default, add a specific class to the element. It will automatically initialize on page load. You can customize default options using data attribute options.
<input class="datedropper-default">Custom Initialization
Alternatively, manually initialize Datedropper using JavaScript. Here’s an example:
<input type="date">
<!-- Datedropper Initialization -->
<script>
new dateDropper('input[type="date"]');
</script>Ensure the initialization code runs after the element is present on the page or when the page is fully loaded.
WordPress Installation
Datedropper can also be easily installed on WordPress websites (starting from version 2.0).
Follow these steps to install the plugin on WordPress:
1. Log in to your WordPress Dashboard
Go to http://yourdomain.com/wp-admin and enter your login credentials.
2. Navigate to the Plugins Section
From the left-hand sidebar, click on Plugins and select Add New.
3. Upload the Plugin
Click the Upload Plugin button at the top, select the datedropper-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
To test the plugin, add the following custom HTML code to any part of your WordPress site:
<input class="datedropper-default">Accessibility Features
Datedropper is designed with accessibility in mind, ensuring an inclusive and user-friendly experience for everyone. Here’s how it stands out:
Keyboard Navigation
Navigate through Datedropper effortlessly using only your keyboard. Intuitive key bindings allow you to open the datepicker, move between dates, and make selections without needing a mouse or touch input.
Managed Focus
The datepicker ensures smooth and predictable navigation by automatically shifting focus to relevant elements during interaction. This eliminates confusion and provides a seamless user experience.
Collision Awareness
Datedropper intelligently adapts its position to ensure the datepicker never appears off-screen or overlaps critical content, enhancing usability and accessibility.
Alignment Control
Customize the alignment of the datepicker to fit your layout. Whether aligned to the top, bottom, or sides, Datedropper adapts to different interfaces while maintaining functionality.
Screen Reader Support
Fully compatible with screen readers, Datedropper includes properly labeled elements to ensure visually impaired users can easily navigate and interact with the datepicker.