Join the community

Getting started

datedropper Javascript is a datepicker library plugin developed down to the very last detail to offer you a datepicker with fantastic ease of use and a marvelous design. Get started by installing datedropper on your site and initializing it on one or more datepicker elements.

How to install datedropper

Get datedropper and you will then be able to download datedropper source file for a direct integration into your HTML.

Add datedropper-javascript.js to the <head> of the pages on which datedropper is being used, as described in the following example:

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

How to initialize datedropper

Once the installation is complete, initialize datedropper on elements that will trigger the datepicker excecution.

Generally datedropper is initialized on input fields but you can specify any kind of selector (e.g. a button, a link etc.).

Let's see how to define the datepicker element on which datedropper has to be initialized.

In this example we will convert all simple input tag with type attribute set to "date" to usefull datepicker:

<input type="date">

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

Make sure you to initialize datedropper after the element is already on page or when page is loaded.