Calendarios Jquery

Dundee · #1 (**permalink**) 07/12/2010, 14:00

Hola gente , estoy trabajando con Jquery y sus calendarios . El problema que tengo es que tengo campos que se generan de forma automática y no se como puedo hacer que la id del input que cargue el calendario pueda ser dinámica; me explico con código mejor:

Código:

<div id="div_1">
<span>Nombre</span>
<input  type="text"  name="name[]"  style="width:200px;" id="nombre1" />
<span>Dni:</span>
<input type="text"   name="vatnumber[]"  style="width:140px;" />
Fecha<input type="text"   name="fecha[]"  style="width:90px;" value=""  id="fecha1" />
<input class="bt_plus" id="1" type="button" value="more" />
<script type="text/javascript">
 /* calendarios */
$("#fecha1").datepicker({ 

   showOn: 'both',
   buttonImage: 'fns/calendar.png',
   buttonImageOnly: true,
   changeYear: true,
   numberOfMonths: 2,
  /* onSelect: function(textoFecha, objDatepicker){
      $("#mensaje").html("<p>Has seleccionado: " + textoFecha + "</p>");
   }*/
	}); 
</script>	
</div>

El tema es que la línea $("#fecha1").datepicker({ necesito que el #fecha1 sea dinámico ,es decir que cambie según el input que afecte #fecha1 ,#fecha2, #fecha3 o los que sean.

Agradezco cualquier sugerencia.
Mil tks.

TIaGoX · #2 (**permalink**) 07/12/2010, 14:57

Hola Dundee, no entiendo muy bien cual es el tema, pero tendrías dos opciones, una es que cambies el selector por uno de clase con lo que podría usarlo así:

Código Javascript:

Ver original/* calendarios */
$(".fecha").datepicker({
    showOn: 'both',
    buttonImage: 'fns/calendar.png',
    buttonImageOnly: true,
    changeYear: true,
    numberOfMonths: 2
});

Y te quedarían todos los inputs con de dicha clase, como calendarios.

O bien, si queres que sea dinamico podrias usar una variable con el numero de #fechaX. Quedandote asi:

Código Javascript:

Ver original/* calendarios */
var id = 1;
$("#fecha" + id).datepicker({
    showOn: 'both',
    buttonImage: 'fns/calendar.png',
    buttonImageOnly: true,
    changeYear: true,
    numberOfMonths: 2
});

Y cambiando tu id cambiarías el input seleccionado.

Espero que sea lo que estas buscando.

Saludos.

JavierB · #3 (**permalink**) 07/12/2010, 15:06

Hola Dundee

Muevo tu tema al foro de Frameworks y Plugins Javascript desde Javascript.

Saludos,

Dundee · #4 (**permalink**) 07/12/2010, 15:52

Cita:

Iniciado por TIaGoX

Hola Dundee, no entiendo muy bien cual es el tema, pero tendrías dos opciones, una es que cambies el selector por

Mil gracias no había caído , necesito practicar más con este FW.

Un saludo

Dundee · #5 (**permalink**) 08/12/2010, 04:19

Cita:

Iniciado por TIaGoX

Hola Dundee, no entiendo muy bien cual es el tema, pero tendrías dos opciones, una es que cambies el selector por uno de clase con lo que podría usarlo así:

Código Javascript:

Ver original/* calendarios */
$(".fecha").datepicker({
    showOn: 'both',
    buttonImage: 'fns/calendar.png',
    buttonImageOnly: true,
    changeYear: true,
    numberOfMonths: 2
});

Después de probarlo me doy cuenta que no funciona usando una clase.
//he sustituído #fecha por .fecha pero sigue sucediendo lo mismo, cambie las fechas que cambie, en el único campo que se reflejan dichos cambios es en el primero (el de id #fecha1)

Código:

<div class="myform">
<form id="form" name="form" method="post" action="index.php">
<div id="div_1">
<span>Nombre</span>
<input  type="text"  name="name[]"  style="width:200px;" id="nombre1" />
<span>Dni:</span>
<input type="text"   name="vatnumber[]"  style="width:140px;" />
Fecha<input type="text"   name="fecha[]"  style="width:90px;"   id="fecha1" class="fecha" />
<input class="bt_plus" id="1" type="button" value="+" />	
<div class="error_form"></div>
</div>
<div class="spacer"></div>
</form>
</div>

Código:

$(document).ready(function() {
$(".fecha").datepicker({

   showOn: 'both',
   buttonImage: 'fns/calendar.png',
   buttonImageOnly: true,
   changeYear: true,
   numberOfMonths: 2,
  /* onSelect: function(textoFecha, objDatepicker){
      $("#mensaje").html("<p>Has seleccionado: " + textoFecha + "</p>");
   }*/
	}); 
});

Nota: Como decía en el primer post , los campos se generan de forma dinámica , cada fila de campos se genera al darle a un botón "añadir nuevos" y crea esos tres campos.

Gracias

TIaGoX · #6 (**permalink**) 09/12/2010, 07:53

Ok, el tema es el siguiente. Vos estas creando ese código HTML con Javascript cuando le dan a un botón de "Agregar". Lo que pasa es que como ese código fue generado después de haberse ejecutado las lineas del datepicker, entonces nunca le asignaste esa funcionalidad a los componentes que acabas de crear.

Acabo de probar asignando el datepicker por clases, y a mi me funciono perfectamente, por eso me inclino a que nunca le asignas los calendarios a los nuevos elementos.

Podrías hacerte una función para que cada vez que agregas una linea para carga de datos, también le asignes el datepicker en el mismo código, luego de insertar el HTML en la pagina.

Saludos.

Dundee · #7 (**permalink**) 09/12/2010, 08:56

Cita:

Iniciado por TIaGoX

Podrías hacerte una función para que cada vez que agregas una linea para carga de datos, también le asignes el datepicker en el mismo código, luego de insertar el HTML en la pagina.

Gacias por la respuesta , pero ya he probado algo similar y no me funciona, lo que he hecho es poner este código justo cuando se crea el nuevo campo:

Código:

<div id="div_1">
<span>Nombre</span>
<input  type="text"  name="name[]"  style="width:200px;" id="nombre1" />
<span>Dni:</span>
<input type="text"   name="vatnumber[]"  style="width:140px;" />
Fecha<input type="text"   name="fecha[]"  style="width:90px;"   id="fecha1" class="fecha" />
<input class="bt_plus" id="1" type="button" value="+" />	
$(".fecha").datepicker({

   showOn: 'both',
   buttonImage: 'fns/calendar.png',
   buttonImageOnly: true,
   changeYear: true,
   numberOfMonths: 2,
  /* onSelect: function(textoFecha, objDatepicker){
      $("#mensaje").html("<p>Has seleccionado: " + textoFecha + "</p>");
   }*/
	}); 

</div>

También he probado a meter ese código que instanacia el datepicker en la función que crea los nuevos campos , pero no me funciona. No se que estaré haciendo mal.

Un saludo y gracias por la ayuda

Dundee · #8 (**permalink**) 09/12/2010, 13:02

Cita:

Iniciado por TIaGoX

Podrías hacerte una función para que cada vez que agregas una linea para carga de datos, también le asignes el datepicker en el mismo código, luego de insertar el HTML en la pagina.

Saludos.

Este es el código que tengo:

Código:

function addField(){

var clickID = parseInt($(this).parent('div').attr('id').replace('div_',''));

// Genero el nuevo numero id
var newID = (clickID+1);

// Creo un clon del elemento div que contiene los campos de texto
$newClone = $('#div_'+clickID).clone(true);

//Le asigno el nuevo numero id
$newClone.attr("id",'div_'+newID);

//Asigno nuevo id al primer campo input dentro del div y le borro cualquier valor que tenga asi no copia lo ultimo que hayas escrito.(igual que antes no es necesario tener un id)
$newClone.children("input").eq(0).attr("id","nombre"+newID).val('');
$newClone.children("input").eq(2).attr("id","fecha"+newID).val('');

//Borro el valor del segundo campo input(este caso es el campo de cantidad)
$newClone.children("input").eq(1).val('');
$newClone.children("input").eq(2).val('');

//Asigno nuevo id al boton
$newClone.children("input").eq(3).attr("id",newID)

//Inserto el div clonado y modificado despues del div original
$newClone.insertAfter($('#div_'+clickID));

//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('-').unbind("click",addField);

//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);	


$(".fecha").datepicker({

   showOn: 'both',
   buttonImage: 'fns/calendar.png',
   buttonImageOnly: true,
   changeYear: true,
   numberOfMonths: 2,
  /* onSelect: function(textoFecha, objDatepicker){
      $("#mensaje").html("<p>Has seleccionado: " + textoFecha + "</p>");
   }*/
	}); 
  
}

Y también cargo el datepicker al cargar toda la página al inicio (para que este disponible para el primer campo generado)

Código:

$(document).ready(function() {
	
	$(".fecha").datepicker({

   showOn: 'both',
   buttonImage: 'fns/calendar.png',
   buttonImageOnly: true,
   changeYear: true,
   numberOfMonths: 2,
  /* onSelect: function(textoFecha, objDatepicker){
      $("#mensaje").html("<p>Has seleccionado: " + textoFecha + "</p>");
   }*/
	}); 
});

Curiosamente genera el iconito del calendario en todos los campos dinámicos (y el primero), pero cuando cambio las fechas solamente los cambios se producen en el primer campo. MIRAR IMAGEN

Nota:sin el readonly sucede lo mismo (ya lo he probado (:: )

Gracias por la ayuda

masterpuppet · #9 (**permalink**) 09/12/2010, 13:31

Que tal Dundee, no se mucho de JQuery(Mootools fan!), pero el problema seguramente es el clone, no te crea un nuevo datepicker sino que mantiene la referencia interna(por eso siempre te cambia el 1º), deberias reasignar el datepicker, algo asi:

Código Javascript:

Ver original...
$newClone.children("input").eq(3).datepicker({
   showOn: 'both',
   buttonImage: 'fns/calendar.png',
   buttonImageOnly: true,
   changeYear: true,
   numberOfMonths: 2
});
...

Salu2.

Dundee · #10 (**permalink**) 10/12/2010, 05:31

Cita:

Iniciado por masterpuppet

no te crea un nuevo datepicker sino que mantiene la referencia interna

Bueno sigue sin funcionar, creo que en Jquery lo que dices sería algo así:

Código:

$(".fecha").clone().datepicker({

   showOn: 'both',
   buttonImage: 'fns/calendar.png',
   buttonImageOnly: true,
   changeYear: true,
   numberOfMonths: 2,
 
	});

¿alguien me puede ayudar con esto por favor?, simplemente me falta un paso que no se como darlo.

Gracias a tod@s por intentar ayudar.

Un saludo y felices fiestas (::