Flatpickr

Lightweight and powerful datetime picker.

Flatpickr documentation

How to use?

Copy-paste the stylesheet <link> into your <head> to load the CSS.

              
                <link rel="stylesheet" href="../../assets/vendor/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="../../assets/vendor/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 range flatpickr
                    $('.js-range-flatpickr').each(function () {
                      var flatpickr = $.HSCore.components.HSFlatpickr.init($(this));
                    });
                  });
                </script>

Basic example

Basic example that highlights today's day.

                    
                      <!-- flatpickr -->
                      <div id="flatpickrWrapperFrom" class="flatpickr input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text">
                            <i class="fas fa-calendar"></i>
                          </span>
                        </div>
                        <input class="js-range-flatpickr form-control bg-transparent rounded-right" type="text" placeholder="From" aria-label="From"
                               data-hs-flatpickr-options='{
                                 "appendTo": "#flatpickrWrapperFrom",
                                 "dateFormat": "d/m/Y"
                               }'>
                      </div>
                      <!-- End flatpickr -->

Range example that shows starting and ending highlighted dates.

                    
                      <!-- flatpickr -->
                      <div id="flatpickrWrapper" class="flatpickr w-auto input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text">
                            <i class="fas fa-calendar"></i>
                          </span>
                        </div>
                        <input class="js-range-flatpickr form-control bg-transparent rounded-right" type="date"
                               data-hs-flatpickr-options='{
                                 "appendTo": "#flatpickrWrapper",
                                 "mode": "range",
                                 "defaultDate": ["03/11/19", "05/11/19"],
                                 "dateFormat": "d/m/Y"
                               }'>
                      </div>
                      <!-- End flatpickr -->

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/flatpickr/

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of flatpickr
                    $('.js-range-datepicker').each(function () {
                      var flatpickr = $.HSCore.components.HSFlatpickr.init($(this), {
                        onOpen: function() {
                          console.log('Opened!!!');
                        }
                      });
                    });
                  });
                </script>

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-flatpickr-options='{
                 ...
              }' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-flatpickr-options='{}'. For more detailed or missing attributes/functions, see the official Flatpickr documentation documentation page.

Parameters Description Default value

mode

 single, multiple, or range single

dateFormat

 A string of characters which are used to define how the date will be displayed in the input box. The supported characters are defined in this table. 'd M Y'

maxDate

 The maximum date that a user can pick to (inclusive) false

locale

 As a container for parameters for a specific language. 

                    locale: {
                      firstDayOfWeek: 1,
                      weekdays: {
                        shorthand: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
                      },
                      rangeSeparator: ' - '
                    }