{"id":6711,"date":"2016-01-08T14:43:51","date_gmt":"2016-01-08T14:43:51","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6711"},"modified":"2016-01-08T14:45:50","modified_gmt":"2016-01-08T14:45:50","slug":"daterangepicker-con-bootstrap","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/daterangepicker-con-bootstrap\/","title":{"rendered":"Daterangepicker con Bootstrap"},"content":{"rendered":"

En este art\u00edculo vamos a hablar sobre Date Range Picker, un componente JavaScript para ofrecer la posibilidad de elegir un intervalo de fechas. Dise\u00f1ado para trabajar bajo el framework Bootstrap.<\/p>\n

Este compomente fue construido para la presentaci\u00f3n de informes en un intervalo de fechas. Este selector se puede conectar a cualquier elemento de una p\u00e1gina Web apareciendo 2 calendarios para la selecci\u00f3n de fechas, horas o rangos definidos como por ejemplo los \u00faltimos 30 d\u00edas.<\/p>\n

\"daterangepicker\"<\/a><\/p>\n

Para a\u00f1adir este componente a nuestra p\u00e1gina Web es necesario tener conocimientos de JavaScript, Bootstrap y HTML.<\/p>\n

Este componente est\u00e1 realizado para Bootstrap y adem\u00e1s utiliza, si quieres, la fuente Font Awesome para obtener los iconos y flechas del calendario.<\/p>\n

En la cabecera de tu p\u00e1gina Web deber\u00e1s incluir los estilos necesario y los plugins:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script<\/span><\/a> type<\/span>=<\/span>"text\/javascript"<\/span> src<\/span>=<\/span>"js\/jquery.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span>\n<script<\/span><\/a> type<\/span>=<\/span>"text\/javascript"<\/span> src<\/span>=<\/span>"js\/moment.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span>\n<link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> type<\/span>=<\/span>"text\/css"<\/span> href<\/span>=<\/span>"css\/font-awesome.min.css"<\/span> \/<\/span>><\/span>\n<link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> type<\/span>=<\/span>"text\/css"<\/span> href<\/span>=<\/span>"css\/bootstrap.min.css"<\/span> \/<\/span>><\/span>\n<script<\/span><\/a> type<\/span>=<\/span>"text\/javascript"<\/span> src<\/span>=<\/span>"js\/daterangepicker.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span>\n<link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> type<\/span>=<\/span>"text\/css"<\/span> href<\/span>=<\/span>"css\/daterangepicker.css"<\/span> \/<\/span>><\/span><\/pre><\/div><\/div>\n
 <\/p>\n
Si te fijas, en nuestro ejemplo estamos incluyendo la librer\u00eda jQuery<\/a>, Moment.js<\/a> y el plugin daterangepicker<\/a>. Adem\u00e1s de sus estilos que se pueden descargar desde sus p\u00e1ginas oficiales.<\/p>\n
Tambi\u00e9n estamos incluyendo la fuente Font Awesome<\/a>.<\/p>\n
En nuestro formulario, dentro del <body> tendremos nuestro input que desplegar\u00e1 los calendarios de selecci\u00f3n de fecha, en este caso:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> type<\/span>=<\/span>"text"<\/span> id<\/span>=<\/span>"date_range"<\/span> name<\/span>=<\/span>"date_range"<\/span> class<\/span>=<\/span>"form-control"<\/span>><\/span><\/pre><\/div><\/div>\n
 <\/p>\n
Ahora tan solo debemos hacer la llamada al plugin que se puede hacer de forma simple con:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>'#date_range'<\/span>)<\/span>.daterangepicker<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
 <\/p>\n
O de forma compleja como el caso de nuestro ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
$(<\/span>function<\/span> (<\/span>)<\/span> {<\/span>\n    $(<\/span>'#date_range'<\/span>)<\/span>.daterangepicker<\/span>(<\/span>{<\/span>\n        "locale"<\/span>:<\/span> {<\/span>\n            "format"<\/span>:<\/span> "YYYY-MM-DD"<\/span>,<\/span>\n            "separator"<\/span>:<\/span> " - "<\/span>,<\/span>\n            "applyLabel"<\/span>:<\/span> "Guardar"<\/span>,<\/span>\n            "cancelLabel"<\/span>:<\/span> "Cancelar"<\/span>,<\/span>\n            "fromLabel"<\/span>:<\/span> "Desde"<\/span>,<\/span>\n            "toLabel"<\/span>:<\/span> "Hasta"<\/span>,<\/span>\n            "customRangeLabel"<\/span>:<\/span> "Personalizar"<\/span>,<\/span>\n            "daysOfWeek"<\/span>:<\/span> [<\/span>\n                "Do"<\/span>,<\/span>\n                "Lu"<\/span>,<\/span>\n                "Ma"<\/span>,<\/span>\n                "Mi"<\/span>,<\/span>\n                "Ju"<\/span>,<\/span>\n                "Vi"<\/span>,<\/span>\n                "Sa"<\/span>\n            ]<\/span>,<\/span>\n            "monthNames"<\/span>:<\/span> [<\/span>\n                "Enero"<\/span>,<\/span>\n                "Febrero"<\/span>,<\/span>\n                "Marzo"<\/span>,<\/span>\n                "Abril"<\/span>,<\/span>\n                "Mayo"<\/span>,<\/span>\n                "Junio"<\/span>,<\/span>\n                "Julio"<\/span>,<\/span>\n                "Agosto"<\/span>,<\/span>\n                "Setiembre"<\/span>,<\/span>\n                "Octubre"<\/span>,<\/span>\n                "Noviembre"<\/span>,<\/span>\n                "Diciembre"<\/span>\n            ]<\/span>,<\/span>\n            "firstDay"<\/span>:<\/span> 1<\/span>\n        }<\/span>,<\/span>\n        "startDate"<\/span>:<\/span> "2016-01-01"<\/span>,<\/span>\n        "endDate"<\/span>:<\/span> "2016-01-07"<\/span>,<\/span>\n        "opens"<\/span>:<\/span> "center"<\/span>\n    }<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
 <\/p>\n
En nuestro ejemplo estamos definiendo nuestro daterangepicker con:<\/p>\n