Agregar eventos a jQuery UI datePicker
Escrito por Martín Iglesias y leído 3,184 veces. Ver comentarios
16MAYO/2012
- Categorías:
- Jquery
- Jquery UI
- Datepicker
- Calendario
- Eventos
Esto es magia en estado puro. Me lo encontré buscando como agregar eventos al jQuery UI datePicker para que, en lugar de seleccionar la fecha indicada, muestre una alerta o siga un vínculo desde cada día del calendario.
Encontré este código que voy a copiar y pegar tal cual... antes que me muerdan, el código no es mío, pero lo que hace, básicamente, es crear un array con los eventos a mostrar y luego capturar el evento de seleccionar la fecha.
No lo he probado aún para saber qué pasa si quisiera seleccionar la misma fecha en la que hay un evento. Entiendo que debería funcionar de todos modos, pero, repito, no lo he probado.
En la demo, para ver los eventos, deben moverse hasta febrero y marzo de 2011 (en la primer línea de este código que pego abajo se ven las fechas).
Recuerda: necesitarás jQuery UI con el plugin datepicker seleccionado si no bajas la librería completa.
var events = [
{ Title: "Five K for charity", Date: new Date("02/13/2011") },
{ Title: "Dinner", Date: new Date("02/25/2011") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
$("div").datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
alert(event.Title);
}
}
});​<div></div>
table.ui-datepicker-calendar tbody td.highlight > a {
background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
color: #363636;
border: 1px solid #FFDE2E;
}Acerca del Autor:
Diseñador web freelance en Coruña Galicia | Martin Iglesias
Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.
Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!
Artículos relacionados:
- 20 plugins para jQuery que no pueden faltar en tus webs
- Excelente listado de 240 plugins para jquery
- Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
- jQuery Validate: la rápida validación de formularios.
- Calendario en PHP con eventos, jQuery y vTip
- Formularios web con jQuery Validate y envío por phpmailer y gmail
- 18 plugins jquery que no pueden faltar en tu web parte 2
Este artículo ha salido en un total de 163 búsquedas desde Google en sus 373 días de vida y ha sido visto 3,184 veces.
