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

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

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

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>
Copy

Basic example

Basic example that highlights today's day.

MoTuWeThFrSaSu
311234567891011121314151617181920212223242526272829301234567891011
<!-- 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 -->
Copy

Range example that shows starting and ending highlighted dates.

MoTuWeThFrSaSu
27282930311234567891011121314151617181920212223242526272829301234567
<!-- 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 -->
Copy

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>
Copy

Attributes

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

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

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: ' - '
}
Copy