Getting started with datedropper

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

There are two ways to install datedropper:

  • integrate a script on your site and run datedropper via CDN;
  • download datedropper source files and install them directly on your site.

CDN installation

CDN installation is available both with the Lite and Pro versions of datedropper. Get datedropper Lite or Pro and you will then receive a code to be integrated into the <head> of the pages on which datedropper is being used, as described in the following example:

<script src="https://cdn.datedropper.com/get/{{LICENSE}}"></script>

Please note that this is a sample code. To obtain your custom code, choose either the Lite or Pro version of datedropper. Get datedropper now.

Source files installation

Source files installation is available only with the Pro version of datedropper. Get datedropper Pro and you will then be able to download datedropper source files for a direct integration into your site.

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

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

About jQuery

Don't forget to include a CDN version of jQuery before integrating datedropper:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

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

Keep in mind that the Lite version only allows you to initialize datedropper on your inputs. On the other hand, the Pro version allows you to initialize datedropper on any kind of selector (e.g. on a button).

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

Related articles