La librería Date Range Picker es una herramienta diseñada para facilitar la selección de rangos de fechas en aplicaciones web. Su versatilidad permite integrarla fácilmante en proyectos que ya utilizan Bootstrap, ofreciendo una interfaz intuitiva para los usuarios finales.

Requisitos previos y dependencias

Para asegurar el correcto funcionamiento del componente, es necesario cargar las bibliotecas de las que depende: jQuery, Moment.js y los estilos de Bootstrap. A continuación se detallan los recursos mínimos necesarios:

<!-- Estilos base -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">

<!-- Scripts requeridos -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

Estructura HTML del selector

Podemos implementar el selector utilizando un grupo de entrada de Boootstrap para añadir un icono visual que mejore la experiencia del usuario:

<div class="input-group mb-3" id="wrapper-fecha" style="max-width: 350px;">
    <input type="text" class="form-control" placeholder="Seleccione un rango" readonly>
    <div class="input-group-append">
        <span class="input-group-text">
            <i class="fa fa-calendar"></i>
        </span>
    </div>
</div>

Inicialización y personalización en JavaScript

El siguiente script inicializa el plugin, define rangos preestablecidos en español y aplica una configuración regional personalizada para los nombres de días y meses:

$(function() {
    var $inputPrincipal = $('#wrapper-fecha input');
    var fechaInicio = moment().subtract(7, 'days');
    var fechaFin = moment();

    $('#wrapper-fecha').daterangepicker({
        startDate: fechaInicio,
        endDate: fechaFin,
        opens: 'right',
        drops: 'down',
        ranges: {
            'Hoy': [moment(), moment()],
            'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
            'Mes actual': [moment().startOf('month'), moment().endOf('month')],
            'Mes pasado': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        locale: {
            format: 'DD/MM/YYYY',
            separator: ' - ',
            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', 'Diciembre'],
            firstDay: 1
        }
    }, function(start, end) {
        // Callback al seleccionar una fecha
        $inputPrincipal.val(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));
    });

    // Definición del valor inicial en el campo de texto
    $inputPrincipal.val(fechaInicio.format('DD/MM/YYYY') + ' - ' + fechaFin.format('DD/MM/YYYY'));
});

Parámetros clave de configuración

• opens: Define la alineación del panel desplegable (pueden ser 'left', 'right' o 'center').
• ranges: Permite crear accesos directos a periodos de tiempo comunes.
• locale: Objeto fundamental para la internacionalización de la interfaz.
• minDate / maxDate: Rsetringe el calendario a un límite de tiempo específico.