datedropper JS is a Pure Javascript user-friendly interface element that allows users to easily select a specific date from a calendar-like interface.


What does Datedropper do

Datedropper helps users to quickly select a date, 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 use Datedropper

Installing and using Datedropper on your web app is extremely easy.


First of all, include the library on the <head> of your webpage

<head> <!-- datedropper lib --> <script src="datedropper-javascript.js"></script>

Then initialize datedropper on a selector

<input type="date">
<!-- datedropper init -->
<script> new dateDropper({ selector: 'input[type="date"]' });

That's it! Read the full documentation to find out how to use the most of all of Datedropper's features.

Read the documentation

Try the new live configurator to easily get the best plugin configuration based on your needs!

Try it now

What features does Datedropper include

Datedropper also includes a bunch of interesting features.

  • Calendar view

    datedropper date picker displays a calendar-like view, allowing users to easily browse through different months and years to select the desired date.

  • 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

    datedropper date picker offers customizable date formats, allowing users to choose the format that best suits their needs.

  • 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.

How to get Datedropper

Get Datedropper now,
it's free!

Download it now


See also