Date Range Picker - Documentation | Front - Admin & Dashboard Template

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

              
                <link rel="stylesheet" href="../node_modules/daterangepicker/daterangepicker.css">

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

              
                <script src="../node_modules/daterangepicker/moment.min.js"></script>
                <script src="../node_modules/daterangepicker/daterangepicker.js"></script>

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

              
                <script src="../assets/js/hs.daterangepicker.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 daterangepicker
                    $('.js-daterangepicker').each(function () {
                      var d = $.HSCore.components.HSDaterangepicker.init($(this));
                    });
                  });
                </script>

                    
                      <input type="text" class="js-daterangepicker form-control daterangepicker-custom-input">

Dropup

Preview
HTML

                    
                      <input type="text" class="js-daterangepicker form-control daterangepicker-custom-input"
                              data-hs-daterangepicker-options='{
                               "drops": "up"
                             }'>

Auto apply

Preview
HTML

                    
                      <input type="text" class="js-daterangepicker form-control daterangepicker-custom-input"
                              data-hs-daterangepicker-options='{
                               "autoApply": true
                             }'>

With time picker

                    
                      <input type="text" class="js-daterangepicker-times form-control daterangepicker-custom-input"
                              data-hs-daterangepicker-options='{
                               "timePicker": true,
                               "locale": {
                                 "format": "M/DD hh:mm A"
                               }
                             }'>

                    
                      <script>
                        $(document).on('ready', function () {
                          $.HSCore.components.HSDaterangepicker.init($('.js-daterangepicker-times'), {
                            startDate: moment().startOf('hour'),
                            endDate: moment().startOf('hour').add(32, 'hour')
                          });
                        });
                      </script>

Initially empty

                    
                      <input type="text" class="js-daterangepicker-clear form-control daterangepicker-custom-input" placeholder="Select dates"
                              data-hs-daterangepicker-options='{
                               "autoUpdateInput": false,
                               "locale": {
                                 "cancelLabel": "Clear"
                               }
                             }'>

                    
                      <script>
                        $(document).on('ready', function () {
                          $.HSCore.components.HSDaterangepicker.init($('.js-daterangepicker-clear'));

                          $('.js-daterangepicker-clear').on('apply.daterangepicker', function(ev, picker) {
                            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                          });

                          $('.js-daterangepicker-clear').on('cancel.daterangepicker', function(ev, picker) {
                            $(this).val('');
                          });
                        });
                      </script>

Predefined with Readonly

                    
                      <button id="js-daterangepicker-predefined" class="btn btn-white">
                        <i class="tio-date-range mr-1"></i>
                        <span class="js-daterangepicker-predefined-preview"></span>
                      </button>

                    
                      <script>
                        $(document).on('ready', function () {
                          var start = moment().subtract(29, 'days');
                          var end = moment();

                          function cb(start, end) {
                            $('#js-daterangepicker-predefined .js-daterangepicker-predefined-preview').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                          }

                          $.HSCore.components.HSDaterangepicker.init($('#js-daterangepicker-predefined'), {
                            startDate: start,
                            endDate: end,
                            ranges: {
                              'Today': [moment(), moment()],
                              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                              'This Month': [moment().startOf('month'), moment().endOf('month')],
                              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                            }
                          }, cb);

                          cb(start, end);
                        });
                      </script>

With arrow

Preview
HTML

                    
                      <!-- Input Group -->
                      <div class="input-group input-group-merge">
                        <input type="text" id="with-arrow-field" class="js-daterangepicker form-control daterangepicker-custom-input">

                        <div class="input-group-append" onclick="$('#with-arrow-field').data('daterangepicker').toggle();">
                          <span class="input-group-text">
                            <i class="tio-chevron-down"></i>
                          </span>
                        </div>
                      </div>
                      <!-- End Input Group -->

Modal example

Preview
HTML

                    
                      <!-- Button Trigger Modal -->
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Open modal
                      </button>
                      <!-- End Button Trigger Modal -->

                      <!-- Modal -->
                      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <!-- Header -->
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
                              <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                                <i class="tio-clear tio-lg" aria-hidden="true"></i>
                              </button>
                            </div>
                            <!-- End Header -->

                            <!-- Body -->
                            <div class="modal-body">
                              <input type="text" class="js-daterangepicker form-control daterangepicker-custom-input"
                                    data-hs-daterangepicker-options='{
                                      "parentEl": "#exampleModal"
                                    }'>
                            </div>
                            <!-- End Body -->

                            <!-- Footer -->
                            <div class="modal-footer">
                              <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Continue</button>
                            </div>
                            <!-- End Footer -->
                          </div>
                        </div>
                      </div>
                      <!-- End Modal -->