Getting started

datedropper is a jQuery datepicker 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

First of all

Include to the <head> a version of jQuery before integrating datedropper as described in the following example:

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>

Adding datedropper

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

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

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  
  <!-- datedropper -->
  <script src="datedropper-jquery.js"></script>
</head>

How to initialize datedropper

Once the installation is complete, initialize datedropper on the datepicker elements on which it has to be executed (e.g. on an input).

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

datedropper standard class and attribute

datedropper automatically recognizes all the elements on which the class datedropper-init or the attribute data-datedropper is being used. So, you just have to add this standard class or attribute on the datepicker elements on which you want datedropper to be initialized.

Take a look at the following examples:

<!-- datedropper-init class -->
<input class="datedropper-init" type="text">

<!-- data-datedropper attribute -->
<input type="text" data-datedropper>

If you dynamically add new elements on which you want to use datedropper, please do not forget that you will need to re-initialize the datepicker plugin on those elements.

Keep in mind that you can also disable the initialization through class or attribute by setting the autoInit option setup as equal to false.

.dateDropper() function

If you need more control over the way in which datedropper is inizialized, you can also use the .dateDropper() function. Specifically, you will need to define the datepicker element on which datedropper has to be initialized, and run the .dateDropper() function.

For instance, you can initialize datedropper on an input with a date-input id:

<input id="date-input" type="text">

<!-- datedropper init -->
<script>$('#date-input').dateDropper();</script>

Make sure to initialize datedropper after the element or on document ready.