Notifications

Date Range Picker

How it works

Originally created for reports at Improvely, the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges like "Last 30 Days".

For full documentation please check the daterangepicker.com

Basic Example
<script>
$(function() {
    $('input[name="dates"]').daterangepicker({ startDate: moment(), endDate: moment().add(2, 'day')});
})
</script>
Single Date Picker
<script>
$(function() {
$('input[name="birthday"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1901,
    maxYear: parseInt(moment().format('YYYY'),10)
    }, function(start, end, label) {
        var years = moment().diff(start, 'years');
        alert("You are " + years + " years old!");
    });
});
</script>
Date Range Picker With Times
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
        format: 'M/DD hh:mm A'
        }
    });
});
</script>
Predefined Date Ranges
 
<script>
$(function() {
    var start = moment().subtract(29, 'days');
    var end = moment();
    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
    $('#reportrange').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>
Need a Help?

Support at pixelwibes@gmail.com

Join our developers community to find answer to your question and help others.
Helpful Links
  • Assigned Tasks View All
  • 158
    1/5 Pending
  • 17
    3/5 Completed
  • 43
    4/5 On Hold
  • 27
    2/5 In Progress
  • Latest Tasks
    1. HR Dashboard
      Tempor fames sapien tristique bibendum per quisque senectus.
      friend friend
      Feedback
    2. Logo Design
      Create new logo in Figma file
      friend friend friend
      New
    3. Hospital App
      the logo of the company you are applying to and an image.
      Feedback
    4. CRM Project
      Convallis mollis porttitor nisi dis adipiscing.
      Changes
  1. comments Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  2. comments Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  3. BOOM!

  • Outgoing Emails View All
  • 158
    1/5 Sending
  • 752
    1/5 Sent
  • 125
    1/5 Delivered
  • 42
    1/5 Failed
  • Latest message View All
    • Avatar
      Github 8 minutes ago

      Where are we in terms of design?

    • Avatar
      Themeforest 12 minutes ago

      Where are we in terms of design?

    • Avatar
      Paybee inc. 22 minutes ago

      Where are we in terms of design?

    • Avatar
      Github 28 minutes ago

      Where are we in terms of design?

Template Setting
Template Site map url