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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(10 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

19 respuestas a “Daterangepicker con Bootstrap”

  1. Jorge dice:

    Hola Jose!
    Fijate que me funciona excelente el campo, ya use explode e implode para separar las fechas, pero no logro que me las separe, este es el codigo que uso.

    $fecha = array($_POST[‘date_range’]);
    $fe = implode(«‘,'», $fecha);
    $f1 = $fe[0];
    $f2 = $fe[1];

  2. Lito dice:

    Buenas, en un daterangepicker al hacer scroll o pulsar click en cualquier área, desaparece y no quiere que desaparezca a pesar de hacer click en cualquier área de la pantalla. Gracias

  3. Simon dice:

    Tengo la duda de que tipo de dato es el que me envia este pluging. Al parecer es un string en este formato (o el que se defina): «YY/m/d – YY/m/d». Por lo que si necesito trabajar como datos separados, tanto la fecha inicial como la final, debo ocupar la funcion explode() para separarlos. El problema que a mi me ocurre viene aqui. Ese String debo formatearlo a un tipo de dato date con DateTime(), ya que recien ahi me permitiria hacer operaciones con ella, como restar entre fechas, agregar o restar dias, meses, etc… Al hacer este «formateo», me arroja errores al intentar almacenarlos en una base de datos mysql.
    Alguien ha trabajado haciendo eso con este pluging que me pueda orientar de como logro llevarlo a cabo.
    Gracias.

    • Jose Aguilar dice:

      Hola,

      La separación de las fechas entiendo que es correcto hacerlo con explode pero quizá te falte usar la función trim() para limpiar espacios en blanco que pudieran quedar. Si este no es el problema, se tendría que debugar tu código para ver que ocurre en él.

      Jose Aguilar,
      Saludos

  4. Lucia dice:

    Hola!
    Tengo instanciados dos daterangepicker en la misma página, llamados desde distinto selector. El primero me funciona perfectamente; el problema viene el el segundo…

    Tienen exactamente la misma funcionalidad pero el segundo sale haciendo click desde una modal. Es una modal de reservas, que consiste en un formulario con dos inputs (date-in y date-out), pero por cuestiones de diseño (y de cliente) no se muestran los inputs, sino una especie de fakeDate (el click lo hacemos en el input de todas formas). Por defecto tengo hoy y mañana como fechas.

    Cuando hago click en el input, me muestra la modal pero no se me cargan los calendarios, el date-in (HOY) me muestra UNDEFINED y el date-out (MAÑANA) me muestra 10 días más adelante…
    (Apuntar que los fakeDate me muestran las fechas correctas)

    • Jose Aguilar dice:

      Hola,

      Necesitaríamos ver el código en algún enlace disponible en internet para poder ver el código fuente desde la consola y darte una respuesta acertada.

      Jose Aguilar,
      Saludos

  5. Alex dice:

    Tengo un problema, se me muestra la fecha Anterior pero no la flecha Siguiente, a que se debera ese error?

  6. Angel dice:

    Es posible extraer las fechas que se encuentran en un rango seleccionado por ejemplo 25/09/2019 – 26/10/2019 y obtener 25 septiembre, 26 septiembre, 27 septiembre …. 26 octubre?

  7. Kelly Figueroa dice:

    Cómo podría modificar el código para que el lugar de separar el día, el mes y el año con un » – » los separe con un » / » ?

  8. Enrique dice:

    Existe un problema a la hora de desplegar la interfaz del componente pues este se corre hacia la izquierda y no permite visualizar el primer calendario.

    Existe alguna forma de solucionarlo?

  9. Gabriel dice:

    Hola como se puede hacer para que a la hora de desplazarme a buscar una fecha Inicial no se me cambié la fecha Final.

    Tengo el problema de qué la modifica a la nueva fecha Inicial seleccionada.

    Gracias

    • Jose Aguilar dice:

      Hola,

      El plugin que se está utilizando en este tutorial funciona de esta forma por defecto. Revisa entre todas las opciones si existe la posibilidad de conseguir lo que necesitas mediante algún parámetro.

      Saludos

  10. Sharon dice:

    Hola! Al momento de ingresar estos valores en una base de datos hay forma de dividirlo en dos fechas separadas, o sea, fecha de inicio una variable y fecha de fin otra? Porque por ahora usando POST me devuelve ambas fechas juntas.

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.