Flatpickr

Lightweight and powerful datetime picker.

Official documentation

For more detailed information and examples, see the official documentation: 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: ' - '
                        }
Contact Us