jQuery
Version: 3.1.1
Datedropper
A customizable JavaScript date picker for websites and apps. Let visitors select dates and date ranges in a calendar that fits your forms.
How to use Datedropper
Easily integrate Datedropper into your website or app.
- 1
1. Link plugin library to your web page's resources
<head>
<!-- datedropper lib -->
<script src="datedropper-javascript.js"></script>
</head> - 2
2. Initialize plugin on a page element
<input id="myInput">
<!-- datedropper init -->
<script>new dateDropper('#myInput');</script>
- 1
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
2. Initialize plugin on a page element
<input id="myInput">
<!-- datedropper init -->
<script>$('#myInput').dateDropper();</script>
What features does Datedropper include?
Customize how visitors browse and select dates.
![Small and large calendar view]()
Small and large calendar view
Choose compact or expanded calendar views to give visitors the right amount of space for browsing dates.
![Date range selection]()
Date range selection
Select start and end dates in one calendar, ideal for hotel stays, trips and multi-day events.
![Custom date formats]()
Custom date formats
Set how selected dates appear in the input to match your audience and form requirements.
![Inline and pop-up options]()
Inline and pop-up options
Keep the calendar visible on the page or open it from an input for a more compact form.
What accessibility features does Datedropper include?
Datedropper supports keyboard navigation and screen reader interaction.
Keyboard controls, focus management and labeled actions support different ways of choosing dates. Flexible placement helps the calendar fit your layout.
Keyboard Navigation
Open the calendar, move between dates and make a selection using the keyboard.
Managed Focus
Managed focus helps keyboard users follow the calendar interaction and identify the active control.
Collision Aware
The calendar adjusts near screen edges to help keep dates and controls visible.
Alignment Control
Choose how the calendar aligns with its input to suit the available space in your form.
Screen Reader Support
Labeled controls help screen readers identify calendar actions and guide users through date selection.
Accessibility features are included only from the javascript version 2.X
Download Datedropper
Get Datedropper and bring it to your next project.
Choose the version that fits your project, or try the configurator to explore its options.
Get it nowSee it in action
- Easy to Integrate
- Cross-Browser Compatible
- Mobile-Optimized
- Accessibility-Friendly
Last release 2023-11-08
Best choiceGet it nowSee it in action
Javascript
Version: 2.0.0
- Easy to Integrate
- Cross-Browser Compatible
- Mobile-Optimized
- Accessibility-Friendly
Last release 2025-01-20
38.8k downloads 😍
See also...
8kTimeDropperTimeDropper
JavaScript time picker for scheduling and forms
420inLineinLine
Rich text editor for editing directly on the page
141Add to CalendarAdd to Calendar
Calendar button for websites and events