Hola,
Estoy reproduciendo el siguiente ejemplo: http://www.eyecon.ro/bootstrap-datepicker/ Y configurándolo a mi gusto.
La duda que tengo, es la siguiente, quiero mostrar el calendario directamente en la web, sin necesidad de una casilla input.
¿Cómo podría hacerlo?
Saludos y gracias por la ayuda,
Respuestas
La casilla input la vas a necesitar para que sea más fácil después enviar los datos mediante el formulario (si no, tendrías que crear un campo de tipo hidden y actualizar su valor continuamente). El truco que puedes usar es el siguiente:
- Con CSS (o incluso con JavaScript) ocultas el campo
inputpara que no se vea. - Con JavaScript, al cargar la página, ejecutas el método
.datepicker('show')para que se muestre el datepicker desplegado.
El único detalle que faltaría es que el datepicker está pensado para mostrarlo en asociado con un input y por eso en uno de sus lados tiene una pequeña marca triangular para indicar claramente el input al que pertenece. Tendrás que usar algo de CSS para quitar esa pequeña marca.
@javiereguiluz
Muchas gracias, me ha funcionado OK, el único problema es la ubicación del calendario, lo quiero mostrar dentro de un grid de dos columnas:
<div class="row"> <div class="col-md-6"> aquí iría el calendario </div> <div class="col-md-6"> otro contenido </div> </div>
Ahora mismo., el calendario se carga fuera de la columna, ¿qué hago para que encaje exactamente dentro de la columna de mi grid?
Gracias de nuevo,
@eladerezador
Prueba a aplicat position: relative a la columna donde va el calendario y después aplica al div del datepicker un position: absolute; top: 0; left: 0.
@javiereguiluz
Buenas, muchas gracias por los consejos, pero me parece que voy a tener que mirar otras soluciones, consigo configurarlo a mi manera y que aparezca directamente. Pero no consigo que se muestre dentro de una columna del grid, además la web se comporta de forma extraña, los enlaces (load()) dejan de funcionar.
¿Se os ocurre otra librería o plugin, con la que pueda incrustar, un calendario de meses, dentro de una columna de un grid? (que la librería sea lo más configurable posible)
Gracias una vez más,
@eladerezador
Puedes usar bootstrap-datepicker que soporta la opción para mostrar el calendario embebido (lo llaman "inline /embedded"). En esta página puedes ver una demo de cómo funciona.
@javiereguiluz
Genial, tiene buena pinta, voy a ello, gracias.
@eladerezador
Perfecto, ya ha funcionado, tengo una última duda, no cambio de hilo, porque tiene que ver con lo mismo.
Me gustaría introducir contenido dentro de cada celda del día del mes, lo primero que se me ha ocurrido, es lo siguiente, dentro del bootstrap-datapicker.js, he agregado esto:
html.push('<td class="'+clsName.join(' ')+'"' + (tooltip ? ' title="'+tooltip+'"' : '') + '>' + '<ul class="icons-calen"><li><img src="img/ico_calen_min_1.png" /></li><li><img src="img/ico_calen_min_2.png" /></li><li><img src="img/ico_calen_min_3.png" /></li><li><img src="img/ico_calen_min_4.png" /></li><li><img src="img/ico_calen_min_5.png" /></li></ul>' + '<ul class="numbers-calen"><li>2</li><li>3</li><li>1</li><li>1</li><li>1</li></ul>' + '<ul class="day-calen"><li>' + prevMonth.getUTCDate() + '</li></ul>' + '</td>');
He introducido, 3 listas verticales, y luego en el css, con un position relative y las propiedades top y left, ubico los ul.
Dos cuestiones, ¿es esta la mejor manera para introducir contenido dentro de cada celda del día del mes? y cuando hago esto, el mes y el año, que se muestran en la cabecera del calendario dejan de funcionar correctamente, tras seleccionar un día del mes ¿alguna sugerencia?.
Muchas gracias,
@eladerezador
Aunque puede que te funcione, esa no es la forma recomendada de hacerlo. Según la documentación del plugin, tienes que usar el evento onRender mediante JavaScript. Este evento se lanza justo antes de mostrar cada día del calendario. Si devuelves disabled, ese día no se puede seleccionar. Pero puedes devolver cualquier otra cadena de texto o HTML para personalizar tu calendario.
@javiereguiluz
Ok, gracias, además, lo ideal supongo, es no tocar nunca los archivos originales.
Perdón, es que solo me queda el tema de introducir HTML en cada celda de los días del mes, pero no doy con la solución, me comentaste que usará el evento onRender, pero este evento no consigo localizarlo en la documentación de este plugin.
Estás son las web de referencia que tengo:
http://bootstrap-datepicker.readthedocs.org/en/stable/events.html
Está última, es la documentación sobre el plugin, y entre sus eventos, no he conseguido encontrar onRender. En este foro, encontré lo siguiente sobre onRender, pero creo que pertenece a otro plugin de bootstrap: http://stackoverflow.com/questions/26856670/bootstrap-datepicker-disable-many-dates-using-onrender
Saludos,
@eladerezador