Tema: Llenado de inputs date automaticamente
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/09/2013, 18:13
Avatar de totti026
totti026
 
Fecha de Ingreso: junio-2011
Mensajes: 150
Antigüedad: 13 años, 5 meses
Puntos: 4
Pregunta Llenado de inputs date automaticamente
Hola,
Tengo este ejemplo que he tomado y quiero seguirlo adaptando.
Tengo este código que al ingresar una cantidad en el input me genera la misma cantidad de inputs tipo date…


-------------------------------------------------------------------------------------------------------------------------------------------------


Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.  
  4. <head>
  5. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  6. <title>Fechas</title>
  7. <script>
  8. function crearCampos1(cantidad){
  9. var div = document.getElementById("1");
  10. while(div.firstChild)div.removeChild(div.firstChild); // remover elementos;
  11.     for(var i = 1, cantidad = Number(cantidad); i <= cantidad; i++){
  12.     var salto = document.createElement("P");
  13.     var input = document.createElement("input");
  14.     var text = document.createTextNode("Semana " + i + ": ");
  15.     input.setAttribute("name", "campo" + i);    
  16.     input.setAttribute("type", "date");
  17.     input.className = "input";
  18.     salto.appendChild(text);
  19.     salto.appendChild(input);
  20.     div.appendChild(salto);
  21.     }
  22. }
  23. </script>
  24. <script>
  25. function crearCampos2(cantidad){
  26. var div = document.getElementById("2");
  27. while(div.firstChild)div.removeChild(div.firstChild); // remover elementos;
  28.     for(var i = 1, cantidad = Number(cantidad); i <= cantidad; i++){
  29.     var salto = document.createElement("P");
  30.     var input = document.createElement("input");
  31.     var text = document.createTextNode("Semana " + i + ": ");
  32.     input.setAttribute("name", "campo" + i);    
  33.     input.setAttribute("type", "date");
  34.     input.className = "input";
  35.     salto.appendChild(text);
  36.     salto.appendChild(input);
  37.     div.appendChild(salto);
  38.     }
  39. }
  40. </script>
  41.  
  42. <script>
  43. function crearCampos3(cantidad){
  44. var div = document.getElementById("3");
  45. while(div.firstChild)div.removeChild(div.firstChild); // remover elementos;
  46.     for(var i = 1, cantidad = Number(cantidad); i <= cantidad; i++){
  47.     var salto = document.createElement("P");
  48.     var input = document.createElement("input");
  49.     var text = document.createTextNode("Semana " + i + ": ");
  50.     input.setAttribute("name", "campo" + i);    
  51.     input.setAttribute("type", "date");
  52.     input.className = "input";
  53.     salto.appendChild(text);
  54.     salto.appendChild(input);
  55.     div.appendChild(salto);
  56.     }
  57. }
  58. </script>
  59.  
  60. <script>
  61. function crearCampos4(cantidad){
  62. var div = document.getElementById("4");
  63. while(div.firstChild)div.removeChild(div.firstChild); // remover elementos;
  64.     for(var i = 1, cantidad = Number(cantidad); i <= cantidad; i++){
  65.     var salto = document.createElement("P");
  66.     var input = document.createElement("input");
  67.     var text = document.createTextNode("Semana " + i + ": ");
  68.     input.setAttribute("name", "campo" + i);    
  69.     input.setAttribute("type", "date");
  70.     input.className = "input";
  71.     salto.appendChild(text);
  72.     salto.appendChild(input);
  73.     div.appendChild(salto);
  74.     }
  75. }
  76. </script>
  77.  
  78. <script>
  79. function crearCampos5(cantidad){
  80. var div = document.getElementById("5");
  81. while(div.firstChild)div.removeChild(div.firstChild); // remover elementos;
  82.     for(var i = 1, cantidad = Number(cantidad); i <= cantidad; i++){
  83.     var salto = document.createElement("P");
  84.     var input = document.createElement("input");
  85.     var text = document.createTextNode("Semana " + i + ": ");
  86.     input.setAttribute("name", "campo" + i);    
  87.     input.setAttribute("type", "date");    
  88.     input.className = "input";
  89.     salto.appendChild(text);
  90.     salto.appendChild(input);
  91.     div.appendChild(salto);
  92.     }
  93. }
  94. </script>
  95. </head>
  96.  
  97. <body>
  98.  
  99. <form>
  100.     
  101.     Fechas 1 <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos1(this.value);" />
  102.     <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos1(this.form.cantidad.value);" />
  103.     <div id="1">
  104.         
  105.     </div>
  106.  
  107.     Fechas 2 <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos2(this.value);" />
  108.     <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos2(this.form.cantidad.value);" />
  109.     <div id="2">
  110.  
  111.     </div>
  112.  
  113.     Fechas 3 <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos3(this.value);" />
  114.     <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos3(this.form.cantidad.value);" />
  115.     <div id="3">
  116.  
  117.     </div>
  118.  
  119.     Fechas 4 <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos4(this.value);" />
  120.     <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos4(this.form.cantidad.value);" />
  121.     <div id="4">
  122.  
  123.     </div>
  124.  
  125.     Fechas 5 <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos5(this.value);" />
  126.     <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos5(this.form.cantidad.value);" />
  127.     <div id="5">
  128.         
  129.     </div>
  130. </form>
  131. </body>
  132. </html>
Y lo que quiero lograr es que al yo seleccionar la fecha en el primer input “Semana 1” automáticamente se llenen los demás con las semanas que le siguen…

Espero explicarme, de antemano muchas gracias…..