                  <div class="box box-light">
                    <div class="box-header with-border">
                      <h3 class="titulos-gris box-title">SELECCI&Oacute;N DE PER&iacute;ODOS</h3>
                      <div class="box-tools pull-right">
                        <div class="btn-group">
                          <button data-toggle="modal" data-target="#intervaloFechaCompras" type="button" class="btn btn-default " data-toggle="dropdown"><i class="fa fa-plus-circle"></i></button>
                          
                        </div>
                        <button type="button" class="btn btn-default" id='btnLimpiarFechaCompras'><i class="fa fa-eraser"></i></button>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        
                      </div>
                      <!-- Modal-Interalo de fechas -->
                      <div class="modal fade" id="intervaloFechaCompras" tabindex="-1" role="dialog" aria-labelledby="intervaloFechaComprasLabel">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                              <h4 class="titulos modal-title" id="intervaloFechaComprasLabel">Seleccione un intervalo</h4>
                            </div>
                            <div class="modal-body">
                              <div id="reportrangeCompras" data-desde='' data-hasta="" class="pull-left" style="background: #fff; cursor: pointer; padding: 5px 10px;  width: 100%">
                                <i style="color: #3c4256;"  class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                                <span></span> <b class="caret"></b>
                              </div>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="agregarPeriodoCompras();">Aceptar</button>
                              <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                              
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body no-padding" style="">
                      <div style="margin-top: 10px !important; padding-right: 10px !important;  padding-left: 5px !important;" class="zero col-sm-12" data-clear='3' >
                        <select data-clear='1' id='listaTiposFecha' class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true">
                          <option value='0' selected="selected">Fecha Comprobante</option>
                          <option value='1'>Fecha Carga</option>
                          <option value='2'>Fecha Recepci&oacute;n</option>
                        </select>
                      </div>

                      <div class="zero col-sm-12" id='conteFiltroPeriodoCompras' data-clear='3' >
                      </div>
                    </div>
                    <!-- /.box-body -->
                    <!-- /.box-footer -->
                  </div>
