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:
<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
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
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];
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
Hola, no se si este plugin tiene esta opción. Lo puedes revisar en su página oficial. quizá tiene algún parámetro para eso pero no me suena.
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.
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
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)
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
Tengo un problema, se me muestra la fecha Anterior pero no la flecha Siguiente, a que se debera ese error?
Hola,
Fíjate en los parámetros que usas para el plugin. Quizá le estás pasando algún parámetro que hace que no se comporte como deseas.
Saludos
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?
Hola,
Si, con un poco de código eso se puede conseguir.
Saludos
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 » / » ?
Hola,
No lo he probado pero quizás tan solo tienes que cambiar esto en la llamada:
«format»: «YYYY-MM-DD»,
por:
«format»: «YYYY/MM/DD»,
Saludos
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?
Hola,
Dejamos el tema abierto por si alguien tiene una respuesta.
Saludos
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
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
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.
Hola,
Puedes usar la función explode() de PHP para separarlas.
Saludos