Getting started with datedropper
datedropper is a JS plugin developed down to the very last detail to offer you a date picker with fantastic ease of use and a marvelous design. Get started by installing datedropper on your site and initializing it on one or more 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 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:
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:
<!-- datedropper -->
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 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 elements on which you want datedropper to be initialized.
Take a look at the following examples:
<!-- datedropper-init class -->
<input class="datedropper-init" type="date">
<!-- data-datedropper attribute -->
<input type="date" 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 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.
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 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="date">
<!-- datedropper init -->
Make sure to initialize datedropper after the element or on document ready.