Datepicker by range

by imiguelsalcedo

HTML

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">
<div class="pull-right daterange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc" data-fun="<?php echo $dat_fun;?>">
          <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
          <span>
           <?php echo date('F d, Y', strtotime($first_day)); ?> - <?php echo date('F d, Y', strtotime($last_day)); ?>
          </span>
          <b class="caret"></b>
        </div>

JavaScript

var cb =  function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
        jQuery('.daterange span').html(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));
    };

var dat_opt = {
      showDropdowns: true,
      showWeekNumbers: false,
      startDate: moment().startOf('month'),
      endDate: moment().endOf('month'),
      ranges: {
        'Hoy': [moment(), moment()],
        'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Ultimos 7 dias': [moment().subtract(6, 'days'), moment()],
        'Ultimos 30 dias': [moment().subtract(29, 'days'), moment()],
        'Este mes': [moment().startOf('month'), moment().endOf('month')],
        'Mes pasado': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      },
      opens: 'left',
      buttonClasses: ['btn btn-default'],
      applyClass: 'btn-small btn-primary',
      cancelClass: 'btn-small',
      format: 'DD-MM-YYYY',
      separator: ' a ',
      locale: {
        applyLabel: 'Aplicar',
        cancelLabel: 'Limpiar',
        fromLabel: 'Desde',
        toLabel: 'Hasta',
        customRangeLabel: 'Personalizado',
        daysOfWeek: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Deciembre'],
        firstDay: 0
      }
    };
    jQuery('.daterange').daterangepicker(dat_opt, cb);
    cb(dat_opt.startDate, dat_opt.endDate);