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.

daterangepicker

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:

<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:

<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:

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

 

O de forma compleja como el caso de nuestro ejemplo:

$(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

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*