How to use?
Simple
Auto apply
With time picker
Predefined with readonly
Initially empty
With append
With arrow
In modal
Sizing
Validation states

Date Range Picker

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

Official documentation

For more detailed information and examples, see the official documentation: Date Range Picker.

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>

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

Drop up

Result
HTML

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

Auto apply

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

Result
HTML

<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

Result
HTML

<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

Result
HTML

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

Modal

Result
HTML

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

<!-- Date Range Picker 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">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
         <!-- In Modal -->
         <label>Select date</label>
         <input type="text" class="form-control js-daterangepicker">
         <!-- End In Modal -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- End Date Range Picker Modal -->

Sizing

Result
HTML

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

Result
HTML

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

Result
HTML

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