Quantity Counter

Simple input spinner controls. A common use would be a "quantity" input on an eCommerce site, booking forms.

How to use?

hs.quantity-counter.js resource is suitable for website with lots of page content. Customize the look and functionality of the plugin as much as you want with unlimited possibilities.

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

            
              <script src="../../assets/js/components/hs.quantity-counter.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 quantity counter
                  var counter = 0;

                  $.HSCore.components.HSQantityCounter.init('.js-quantity', {
                    stopIncrease: function() {
                      if (counter >= 19) return true;
                    },
                    afterIncrease: function() {
                      counter += 1;
                    },
                    afterDecrease: function() {
                      counter -= 1;
                    }
                  });
                });
              </script>
            
          

Basic example

Basic example that highlights today's day.

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

JavaScript behavior