<div id="daterange" class="input-group" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; margin-bottom: 12px;">
      <i class="fa fa-calendar"></i>&nbsp;
      <span ></span>
      <i class="fa fa-caret-down" style="margin-left: 14px;"></i>
    </div>
<script type="text/javascript">
    $(function() {

    var start = moment().startOf('year');
    var end = moment().endOf('year');

    function cb(start, end) {
        $('#daterange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        getTopUsers(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
        getTotalStats(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
        getChartData(start.format('YYYY'));
    }

    $('#daterange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'This Year': [moment().startOf('year'), moment().endOf('year')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
        }
    }, cb);
    cb(start, end);
    });
    </script>