Datepicker (Flatpickr)

How to use

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 following <script> near the end of your pages under JS Front to enable it.

              
                <script src="../assets/js/hs.flatpickr.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of flatpickr
                    $('.js-flatpickr').each(function () {
                      $.HSCore.components.HSFlatpickr.init($(this));
                    });
                  });
                </script>

                    
                      <!-- Flatpickr -->
                      <input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"
                             data-hs-flatpickr-options='{
                               "dateFormat": "d/m/Y"
                             }'>
                      <!-- End Flatpickr -->

With value

Use value attribute.

Preview
HTML

                    
                      <!-- Flatpickr -->
                      <input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates" value="21/06/2019"
                             data-hs-flatpickr-options='{
                               "dateFormat": "d/m/Y"
                             }'>
                      <!-- End Flatpickr -->

External elements

Preview
HTML

Due date

                    
                      <!-- Form Group -->
                      <div class="form-group">
                        <label for="projectDeadlineFlatpickrNewProjectLabel" class="input-label">Due date</label>

                        <div id="projectDeadlineNewProjectFlatpickr" class="js-flatpickr flatpickr-custom input-group input-group-merge"
                             data-hs-flatpickr-options='{
                              "appendTo": "#projectDeadlineNewProjectFlatpickr",
                              "dateFormat": "d/m/Y",
                              "wrap": true
                            }'>
                          <div class="input-group-prepend" data-toggle>
                            <div class="input-group-text">
                              <i class="tio-date-range"></i>
                            </div>
                          </div>

                          <input type="text" class="flatpickr-custom-form-control form-control" id="projectDeadlineFlatpickrNewProjectLabel" placeholder="Select dates" data-input value="29/06/2020">
                        </div>
                      </div>
                      <!-- End Form Group -->

Range dates

Use range dates.

Preview
HTML

                    
                      <!-- Flatpickr -->
                      <input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"
                             data-hs-flatpickr-options='{
                               "dateFormat": "d/m/Y",
                               "mode": "range"
                             }'>
                      <!-- End Flatpickr -->

Multiple dates

Use multiple mode.

Preview
HTML

                    
                      <!-- Flatpickr -->
                      <input type="text" class="js-flatpickr form-control flatpickr-custom" placeholder="Select dates"
                             data-hs-flatpickr-options='{
                               "dateFormat": "d/m/Y",
                               "mode": "multiple"
                             }'>
                      <!-- End Flatpickr -->

Plain Text

Use "inline": true

Preview
HTML

                    
                      <!-- Flatpickr -->
                      <input type="text" class="js-flatpickr d-none" placeholder="Select dates"
                             data-hs-flatpickr-options='{
                               "dateFormat": "d/m/Y",
                               "inline": true
                             }'>
                      <!-- End Flatpickr -->

Disabling dates

Your can write custom javascript function.

                    
                      <!-- Flatpickr -->
                      <input type="text" id="js-flatpickr-disabling-dates" class="form-control flatpickr-custom" placeholder="Select dates"
                             data-hs-flatpickr-options='{
                               "dateFormat": "d/m/Y"
                             }'>
                      <!-- End Flatpickr -->

                    
                      <script>
                        $(document).on('ready', function () {
                          $.HSCore.components.HSFlatpickr.init($('#js-flatpickr-disabling-dates'), {
                            disable: [
                              function (date) {
                                // return true to disable
                                return (date.getDay() === 0 || date.getDay() === 6);
                              }
                            ],
                          });
                        });
                      </script>