Date Range Picker

A JavaScript component for choosing date ranges, dates and times.

How to use?

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

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

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

                  
                    <script src="../assets/vendor/daterangepicker/moment.min.js"></script>
                    <script src="../assets/vendor/daterangepicker/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').daterangepicker();
                      });
                    </script>
                  
                

Simple

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

Drop up

                        
                          <input type="text" class="form-control js-daterangepicker"
                                 data-drops="up">
                        
                      

Auto apply

Use data-auto-apply="true" attribute.

                        
                          <input type="text" class="form-control js-daterangepicker" data-auto-apply="true">
                        
                      

With time picker

                        
                          <input type="text" class="form-control js-daterangepicker-times">
                        
                      
                        
                          <script>
                            $(document).on('ready', function () {
                              $('.js-daterangepicker-times').daterangepicker({
                                timePicker: true,
                                startDate: moment().startOf('hour'),
                                endDate: moment().startOf('hour').add(32, 'hour'),
                                locale: {
                                  format: 'M/DD hh:mm A'
                                }
                              });
                            });
                          </script>
                        
                      

Initially empty

                        
                          <input type="text" class="form-control js-daterangepicker-clear" placeholder="Select dates">
                        
                      
                        
                          <script>
                            $(document).on('ready', function () {
                              $('.js-daterangepicker-clear').daterangepicker({
                                autoUpdateInput: false,
                                locale: {
                                  cancelLabel: '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-soft-primary">
                            <i class="nova-calendar mr-2"></i>
                            <span></span>
                          </button>
                        
                      
                        
                          <script>
                            $(document).on('ready', function () {
                              function cb(start, end) {
                                $('#js-daterangepicker-predefined span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                              }

                              $('#js-daterangepicker-predefined').daterangepicker({
                                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 append

                        
                           <div class="input-group">
                             <input type="text" id="with-append-field" class="form-control js-daterangepicker">
                             <div class="input-group-append">
                               <label for="with-append-field" class="input-group-text">
                                 <i class="nova-calendar"></i>
                               </label>
                             </div>
                           </div>
                        
                      

With Arrow

                        
                           <div class="input-group input-group-merge" >
                             <input type="text" id="with-arrow-field" class="form-control form-control-append-icon js-daterangepicker" >
                             <div class="input-group-append-merge" onclick="$('#with-arrow-field').data('daterangepicker').toggle();" >
                               <i class="nova-angle-down" > </i >
                             </div >
                           </div >
                        
                      

Sizing

                        
                          <!-- Small -->
                          <input type="text" class="form-control form-control-sm js-daterangepicker">
                          <!-- End Small -->

                          <!-- Default -->
                          <input type="text" class="form-control js-daterangepicker">
                          <!-- End Default -->

                          <!-- Large -->
                          <input type="text" class="form-control form-control-lg js-daterangepicker">
                          <!-- End Large -->
                        
                      

Validation states

For more inforamation about form validation your can read on Validation page

Required field
                        
                          <!-- Valid State -->
                          <div class="u-has-success">
                            <input type="text" class="form-control js-daterangepicker">
                            <input type="text" class="form-control js-daterangepicker">
                            <small class="text-success">Required field</small>
                          </div>
                          <!-- End Valid State -->
                        
                      
Required field
                        
                          <!-- Invalid State -->
                          <div class="u-has-error">
                            <input type="text" class="form-control js-daterangepicker">
                            <small class="text-danger">Required field</small>
                          </div>
                          <!-- End Invalid State -->