Guides
Legal
On this page:
Datedropper Javascript is a highly customizable datepicker library plugin designed for easy integration and a stunning design. To begin, follow these steps:
Default installation
How to install
Download the Datedropper source file for direct HTML integration.
Add datedropper-javascript.js to the <head> of your pages where you plan to use Datedropper. Here's an example:
<head>
...
<!-- datedropper -->
<script src="datedropper-javascript.js"></script>
</head> How to initiliaze
Once installation is complete, initialize Datedropper on the elements that will trigger the datepicker. Typically, Datedropper is initialized on input fields, but you can use any selector, such as buttons or links. You can initialize datedropper in two different way:
Default initialization
You can add a default class to the element you want to initialize and it will be automatically initialized on page load. In this case you can customize the default options by using data attributes options
<input class="datedropper-default">Custom initialization
Here's an example of how to define the datepicker element for initialization:
<input type="date">
<!-- datedropper init -->
<script>
new dateDropper({
selector: 'input[type="date"]'
});
</script>In this case, just remember to initialize Datedropper after the element is already on the page or when the page is fully loaded.
Wordpress installation
You can now easily install Datedropper on Wordpress website too (only from 2.0 version).
To install the plugin on WordPress, follow these steps:
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:
In the left-hand sidebar, click on Plugins and then select Add New.
3. Click on "Upload Plugin" button in the top
Choose the datedropper-javascript.zip file and click Install Now
4. Activate the Plugin
After installation, the Activate button will appear. Click it to activate the plugin.
5. Test the plugin
Your plugin should now be active and ready to use on your WordPress site. To test it, just copy and past this CUSTOM HTML code on any part of your Wordpress site.
<input class="datedropper-default">Accessibility features
Datedropper is designed with accessibility at its core, ensuring an intuitive and seamless experience for all users. Here’s how we prioritize inclusivity:
Keyboard Navigation
Navigate through DateDropper with ease 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
Our datepicker is designed to manage focus effectively, ensuring a smooth and predictable user experience. As you interact with DateDropper, focus automatically moves to relevant elements, preventing confusion and creating a clear navigation path.
Collision Aware
DateDropper intelligently adapts to its environment, ensuring the datepicker 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 datepicker ensures it suits any layout. Whether aligned to the top, bottom, or sides, DateDropper accommodates varying interfaces and maintains its usability across devices.
Screen Reader Support
Designed with assistive technologies in mind, DateDropper is fully compatible with screen readers. Each element is properly labeled and described, allowing visually impaired users to navigate and interact with the datepicker effortlessly.