Flatpickr

Lightweight and powerful datetime picker.

Official documentation

For more detailed information and examples, see the official documentation: Flatpickr documentation .

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 range datepicker
                      $.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
                    });
                  </script>

Basic example

Basic example that highlights today's day.

Result
HTML

                      
                        <!-- Datepicker -->
                        <div id="datepickerWrapperFrom" class="u-datepicker input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <span class="fas fa-calendar"></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.

Result
HTML

                      
                        <!-- Datepicker -->
                        <div id="datepickerWrapper" class="u-datepicker w-auto input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <span class="fas fa-calendar"></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.

Previous Fancybox

Next Google Map