Daterangepicker con Bootstrap

En este artículo vamos a hablar sobre Date Range Picker, un componente JavaScript para ofrecer la posibilidad de elegir un intervalo de fechas. Diseñado para trabajar bajo el framework Bootstrap.

Este compomente fue construido para la presentación de informes en un intervalo de fechas. Este selector se puede conectar a cualquier elemento de una página Web apareciendo 2 calendarios para la selección de fechas, horas o rangos definidos como por ejemplo los últimos 30 días.

Para añadir este componente a nuestra página Web es necesario tener conocimientos de JavaScript, Bootstrap y HTML.

Este componente está realizado para Bootstrap y además utiliza, si quieres, la fuente Font Awesome para obtener los iconos y flechas del calendario.

En la cabecera de tu página Web deberás incluir los estilos necesario y los plugins:

Source code

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/daterangepicker.css" />

Si te fijas, en nuestro ejemplo estamos incluyendo la librería jQuery, Moment.js y el plugin daterangepicker. Además de sus estilos que se pueden descargar desde sus páginas oficiales.

También estamos incluyendo la fuente Font Awesome.

En nuestro formulario, dentro del <body> tendremos nuestro input que desplegará los calendarios de selección de fecha, en este caso:

Source code

<input type="text" id="date_range" name="date_range" class="form-control">

Ahora tan solo debemos hacer la llamada al plugin que se puede hacer de forma simple con:

Source code

$('#date_range').daterangepicker();

O de forma compleja como el caso de nuestro ejemplo:

Source code

$(function () {
    $('#date_range').daterangepicker({
        "locale": {
            "format": "YYYY-MM-DD",
            "separator": " - ",
            "applyLabel": "Guardar",
            "cancelLabel": "Cancelar",
            "fromLabel": "Desde",
            "toLabel": "Hasta",
            "customRangeLabel": "Personalizar",
            "daysOfWeek": [
                "Do",
                "Lu",
                "Ma",
                "Mi",
                "Ju",
                "Vi",
                "Sa"
            ],
            "monthNames": [
                "Enero",
                "Febrero",
                "Marzo",
                "Abril",
                "Mayo",
                "Junio",
                "Julio",
                "Agosto",
                "Setiembre",
                "Octubre",
                "Noviembre",
                "Diciembre"
            ],
            "firstDay": 1
        },
        "startDate": "2016-01-01",
        "endDate": "2016-01-07",
        "opens": "center"
    });
});

En nuestro ejemplo estamos definiendo nuestro daterangepicker con:

Con el formato de fechas específico que nos interesa: YYYY-MM-DD
Con un guión para separar las fechas
Especificamos una fecha de inicio
Especificamos una fecha de fin
Indicamos que la apertura del calendario sea desde el centro del input.
Y como puedes observar podemos traducir o cambiar los textos que hay dentro del plugin

Ver ejemplo en funcionamiento

Revisa todas las opciones

Genera tu propio daterangepicker