Crear datepicker dinamicamente con javascript

[JAI_ME]

Buenas noches, estoy usando el datepicker de jquery en mi proyecto, con el siguiente código


<script>
$(document).ready(function(){

$(".campofecha").datepicker({
showOn: 'both',
buttonImage: 'datepicker/calendar.gif',
buttonImageOnly: true,
changeYear: true,
numberOfMonths: 1,
changeMonth: true,
yearRange: '-90 :+100'
});
</script>

y tengo un boton en el HTML
de la siguiente manera

<input type="button" id="bgenerar" name="bgenerar" value="Genera" onclick="generafecha();" />


generafecha es un funcion en un documento javascript la cual genera atomaticamente varios camposfecha cuya clase es "campofecha" es decir un datepicker, pero al generarlos crea solo los imputs pero no las propiedades del datepicker, se que es porque generando los camposfecha despues de haberse cargado la pagina, como puedo hacer para evitar esto.

la funcion generafecha() es la siguiente me disculpan si la sintaxis no es la correcta debido a que estoy digitando todo aqui

document.getElementById('div-dondegenero').innerHTML +='<br/><input type="text" name="fecha" class="campofecha" readonly="readonly" />';

[Naahuel]

Podrías usar .delegate(). Así:
http://jsbin.com/emamiz (ir a "Edit in jsbin.com" para ver el código fuente)

Código Javascript:

$(function(){
      $('.form-con-fechas').delegate('.campofecha','focusin',function(){
        $(this).datepicker(); 
      });
      
      
      $('.agregar-campo').click(function(){
        $('.campofecha').last().after('<input class="campofecha" type="text" />');
      });
    });
 

[JAI_ME]

Gracias Naahuel, pero en javascript antes de general dinamicamente la fecha, hago varias validaciones y calculos para despues crearlos, las veo dificil hacerlas desde jquery, alguna otra manera ?

[Naahuel]

No entiendo el problema.

El generado de los campos hacelos como quieras, lo que interesa ahí es la forma de delegar el datepicker() de forma de que funcione aún cuando insertás un campo dinámicamente:

Código Javascript:

$('form').delegate('.campofecha','focusin',function(){
        $(this).datepicker(); 
      });
 

[JAI_ME]

buenas tardes haciendo caso a su experiencia he modificado el codigo de la siguiente manera.

<script>
$(document).ready(function(){

$(".campofecha").datepicker({
showOn: 'both',
buttonImage: 'datepicker/calendar.gif',
buttonImageOnly: true,
changeYear: true,
numberOfMonths: 1,
changeMonth: true,
yearRange: '-90 :+100'
});

$('.form-gerados').delegate('.campofecha','focusin',functio n(){
$(this).datepicker();
});

</script>


<input type="button" id="bgenerar" name="bgenerar" value="Genera" onclick="generafecha();" />


function generafecha(){
document.getElementById('div-dondegenero').innerHTML +='<br/><input type="text" name="fecha" class="campofecha" readonly="readonly" />';
}



no me esta funcionando, que tendre mal o como puedo hacerlo funcionar. gracias.

[Naahuel]

¿Por qué estás asignando el datepicker dos veces?

Tu script tiene muchos problemas. Para empezar, problemas de sintaxis con paréntesis desbalanceados.

Esta función es problemática:

Código Javascript:

function generafecha(){ 
document.getElementById('div-dondegenero').innerHTML +='<br/><input type="text" name="fecha" class="campofecha" readonly="readonly" />';
}
 

Esto borra los inputs y genera nuevos. Si ya completaste alguno antes, se te borra. Mirá acá: http://jsbin.com/ipuxuf (generá uno, llenalo con una fecha y generá otro, vas a ver que se borra lo que llenaste).

Algo así sería mejor, dado que ya estás usando jQuery:

Código Javascript:

function generafecha(){ 
  $('#div-dondegenero').append('<br /><input type="text" name="fecha" class="campofecha" readonly="readonly" />');
}
 

Eso agrega html sin borrar lo que ya hay. Probalo acá: http://jsbin.com/ipuxuf/2/

[JAI_ME]

que pena Naahuel, al parecer eres una persona muy sabia, los errores de sitaxis en el documento html original no exiten si no no estuviera funcionando, perdona la forma como lo transcribí faltaron unos paréntesis ahora me di cuenta, pero en definitiva.
la function


function generafecha(){
$('#div-dondegenero').append('<br /><input type="text" name="fecha" class="campofecha" readonly="readonly" />');
}

la tengo en un documento aparte no el mismo html, no hay problema con esto ?

<script>
$(document).ready(function(){

$(".campofecha").datepicker({
showOn: 'both',
buttonImage: 'datepicker/calendar.gif',
buttonImageOnly: true,
changeYear: true,
numberOfMonths: 1,
changeMonth: true,
yearRange: '-90 :+100'
});

$('.form-gerados').delegate('.campofecha','focusin',functio n(){
$(this).datepicker();
});

});
</script>

Esta parte esta bien ? donde hago la doble asignacion del datepicker ?

si desea puedo enviarle los archivos con lo que pretendo desarrollar.

[JAI_ME]

Gracias de nuevo, ya lo he solucionado el problema ahora es que cuando genera el datepicker no me nuestra el icono de la fecha si no hasta cuando le doy clic sobre el input, como podre solucionar esto ?

[Naahuel]

Iniciado por JAI_ME

Gracias de nuevo, ya lo he solucionado el problema ahora es que cuando genera el datepicker no me nuestra el icono de la fecha si no hasta cuando le doy clic sobre el input, como podre solucionar esto ?

Me imaginé que eso sería un problema cuando lo vi en funcionamiento, sip. Probemos otra aproximación, olvidémonos de .delegate():

Código Javascript:

$(function(){
    // cuando el DOM cargue, asignarle el datepicker a los campos de fecha
    asignarDatepicker($('.campofecha'));
  });
  
  //funciones
 function asignarDatepicker(elem){
     elem.datepicker({
              showOn: 'both',
              buttonImage: 'datepicker/calendar.gif',
              buttonImageOnly: true,
              changeYear: true,
              numberOfMonths: 1,
              changeMonth: true,
              yearRange: '-90 :+100'
      }); 
  }
  
function generafecha(){ 
  var nuevoInput = $('<input type="text" name="fecha" class="campofecha" readonly="readonly" /><br />'); //crear objeto jquery con el campo
   $('#div-dondegenero').append(nuevoInput);
  nuevoInput =  $('#div-dondegenero').find('input').last();
  asignarDatepicker(nuevoInput);
}
 

De esa forma sólo asignamos una sóla vez el datepicker y es un tantito más fácil de rastrear. Ese script no es muy óptimo realmente, pero funciona. La función que genera los inputs además de generarlos les asigna el datepicker. Acá está en funcionamiento http://jsbin.com/ipuxuf/4 y si carga la imagen apenas generas otro.

Espero esta solución sea un poco mejor :)