Flatpickr

Lightweight and powerful datetime picker.

How to use?

To add hs.range-datepicker.js in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS INIT function of the plugin.

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/components/hs.range-datepicker.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 custom select
                  $('.js-select').selectpicker();
                });
              </script>
            
          

Basic example

Basic example that highlights today's day.

                  
                    <!-- Datepicker -->
                    <div id="datepickerWrapperFrom" class="u-datepicker input-group u-form">
                      <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fas fa-calendar u-form__text-inner"></span>
                        </span>
                      </div>
                      <input class="js-range-datepicker form-control bg-transparent rounded-right" type="text" placeholder="From" aria-label="From"
                             data-rp-wrapper="#datepickerWrapperFrom"
                             data-rp-date-format="d/m/Y">
                    </div>
                    <!-- End Datepicker -->
                  
                

Range example that shows starting and ending highlighted dates.

                  
                    <!-- Datepicker -->
                    <div id="datepickerWrapper" class="u-datepicker w-auto input-group u-form">
                      <div class="input-group-prepend u-form__prepend">
                        <span class="input-group-text u-form__text">
                          <span class="fas fa-calendar u-form__text-inner"></span>
                        </span>
                      </div>
                      <input class="js-range-datepicker form-control bg-transparent rounded-right" type="date"
                             data-rp-wrapper="#datepickerWrapper"
                             data-rp-type="range"
                             data-rp-date-format="d/m/y"
                             data-rp-default-date='["05/07/18", "31/07/18"]'>
                    </div>
                    <!-- End Datepicker -->
                  
                

JavaScript behavior

Config

            
              locale: {
                firstDayOfWeek: 1 - integer
                weekdays: {
                  shorthand: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] - array
                }
                rangeSeparator: '-' - string
              }
              nextArrow: '>' - string
              prevArrow: '<' - string
              onDayCreate: function(){} - callback function
            
          

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-rp-wrapper="".

Attribute Description

data-rp-wrapper

If the value is not empty, then indicates the container where the drop-down block with the calendar will be placed. If the value is empty, then the drop-down box will be placed immediately after the closing body tag.

data-rp-is-inline

If set to true, then the calendar will behave like a static block in the content.

data-rp-type

Type of calendar. Valid values are:
  • single
  • multiple
  • range
Default value: single

data-rp-date-format

Date format.

data-rp-default-date

The default date (placeholder).

data-rp-event-dates

Selected dates. Such dates will be highlighted in styles.

locale.firstDayOfWeek

Determines from which day the week begins.

locale.weekdays.shorthand

Short names for the days of the week.

locale.rangeSeparator

Separator which, if data-rp-type="range"is set to indicate 2 dates in the placeholder.

nextArrow

Markup button that shows the next month.

prevArrow

Markup button that shows the previous month.

onDayCreate

Performs functions inside when initializing the calendar. By default, a function is assigned that adds the dates specified in the data-rp-event-dates to the dates.