Timedropper
A UI timepicker
Datedropper
Datedropper is a modern, lightweight, and customizable UI date picker, offering an intuitive and accessible solution for selecting dates in web applications.
38.7k downloads 😍
How to use Datedropper
Easily install and use Datedropper on your web app.
- 1
Link plugin library to your web page's resources
<head>
<!-- datedropper lib -->
<script src="datedropper-javascript.js"></script>
</head> - 2
Initialize plugin on a page element
<input id="myInput">
<!-- datedropper init -->
<script>new dateDropper('#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>
<!-- datedropper -->
<script src="datedropper-jquery.js"></script>
</head> - 2
Initialize plugin on a page element
<input id="myInput">
<!-- datedropper init -->
<script>$('#myInput').dateDropper();</script>
What features does Datedropper include
Datedropper offers compelling features.
![Small and large calendar view]()
Small and large calendar view
datedropper date picker displays a calendar-like small and large view, allowing users to easily browse through different months and years to select the desired date.
![Date range selection]()
Date range selection
datedropper date picker allows users to select a range of dates, such as a start and end date for a trip or event.
![Custom date formats]()
Custom date formats
datedropper date picker offers customizable date formats, allowing users to choose the format that best suits their needs.
![Inline and pop-up options]()
Inline and pop-up options
datedropper datepicker can be displayed inline or as a pop-up dialog when a user clicks on a designated input field.
What accessibility features does Datedropper include
Datedropper provides an inclusive and user-friendly experience for everyone!
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.
Accessibility features are included only from the javascript version 2.X
Why use Datedropper
Datedropper streamlines date selection, saving time and reducing errors.
This datepicker allows users to select the desired date by clicking on it. The selected date will then be displayed in the input field and can be used for any relevant purpose, such as booking a flight or making a reservation.
How to get Datedropper
Get Datedropper for free now and experience the difference!
jQuery
Version: 3.1.1
- Full jQuery features access
- No accessibility features
Last release 2023-11-08
New versionGet it now
Javascript
Version: 2.0.0
- Full javascript features access
- Accessibility features
Last release 2025-01-20
38.7k downloads 😍
See also...
7.9kTimedropper
Inline
A simple WYSIWYG editor
414Inline
Add to Calendar
A save the date button
138Add to Calendar