Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../node_modules/flatpickr/dist/flatpickr.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../node_modules/flatpickr/dist/flatpickr.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
// INITIALIZATION OF Datepicker
flatpickr(".js-flatpickr", {});
</script>
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates">
<script>
flatpickr(".js-flatpickr", {});
</script>
<input type="text" class="date-time-js-flatpickr form-control flatpickr-custom" placeholder="Select dates">
<script>
flatpickr(".date-time-js-flatpickr", {
enableTime: true,
dateFormat: "Y-m-d H:i",
});
</script>
Use value attribute.
<input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates" value="21/06/2019">
<script>
flatpickr(".js-flatpickr", {});
</script>
Use range dates.
<input type="text" class="range-js-flatpickr form-control flatpickr-custom" placeholder="Select dates">
<script>
flatpickr(".range-js-flatpickr", {
dateFormat: "d/m/Y",
mode: "range"
});
</script>
Use multiple mode.
<input type="text" class="multiple-js-flatpickr form-control flatpickr-custom" placeholder="Select dates">
<script>
flatpickr(".multiple-js-flatpickr", {
dateFormat: "d/m/Y",
mode: "multiple"
});
</script>
Use "inline": true
<input type="text" class="inline-js-flatpickr d-none" placeholder="Select dates">
<script>
flatpickr(".inline-js-flatpickr", {
dateFormat: "d/m/Y",
inline: true
});
</script>