Jquery visualizar un calendario en un input clonado

[slikp]

- Buenas a todos espero puedan ayudarme ya tengo un par de varias horas con esto y nada que encuentro la solucion, veran a raiz de que el atributo Date de html5 no me sirve en Mozilla Firefox busque otra alternativa en Google y me encontre con el Calendario Datepicker lo probe por separado de mi proyecto y de una vez me funciono lo cambie a español y todo fino todo bello, bien lo quise integrar a mi proyecto y hasta cierto punto pense que estaba bien hasta que me di cuenta que si añadia otro campo en mi documento el calendario en el segundo elemento clonado no funciona, para ser mas claro yo tengo el siguiente formulario.

Código HTML:

<form method="post" name="up_form" class="formulario">
        <input type="hidden" name="insertar">
      <table id="up_form"><br>      
        <thead>
            <tr>
                <th>Clasificación</th>
                <th>Descripción Documento</th>
                <th>Fecha del Documento</th>
                <th>Fecha de Expiración</th>
                <th>Adjuntar Archivo</th>
            </tr>         
        </thead>
        <tbody> 
            <tr class="lire">
                <td>
                    <select id="taxonomia" name="cod_clasificacion">
                        <option value="">SELECCIONE UNA OPCION VALIDA</option>
                        <option value="0">EXPEDIENTE MEDICO</option>
                        <option value="1">EXPEDIENTE LABORAL</option>
                        <option value="2">EXPEDIENTE SEGURIDAD INDUSTRIAL</option>
                    </select>
                </td>
                <td>
                    <textarea id="describe" name="descripcion" required /></textarea>
                </td>
                <td>
                    <input type="text" class="datepicke" name="fecha_doc" required />
                </td>
                <td>
                    <input type="text" class="datepicker" name="fecha_exp" required />
                </td>
                <td>
                    <div class='input-file'>
                      <input type="file" name="archivo[]">
                      <input type="hidden" name="codigo" value="<?php echo $fila["cod_emp"]; ?>">
                        Seleccionar archivo
                      <div class="files">...</div>
                  </div>
                </td>
            </tr>
        </tbody>    
      </table>
        <td>
            <a href="#" id="btn-up" class="anex-up"> Anexar Otro Archivo </a>
            <input id="btn-up" class="sub" type="submit" value="Cargar Documentos">
        </td><br><br>
    </form>
 

- Eso me da la siguiente interfaz.


- Si hago un click en cualquier de los dos input de Fecha del Documento y Fecha de Expiracion me sale el siguiente calendario.

.

- Ahora bien si yo hago un click en Añadir otro Archivo la fila de arriba se clona y se anexa de bajo, hice 2 click por lo tanto obtuve lo siguiente.

.

- Ok ahora el problema si yo doy click en los inputs CLONADOS de Fecha del Documento y Fecha de Expiracion no "Hace nada" no se muestran los calendario.

- Con este codigo hago la clonacion de filas.

Código Javascript:

$(document).ready(function() {
    $(document).on('change', 'input:file', function(){  // NUEVA LINEA
       if($(this).val())
       {
         // Si tiene valor, se muestra en el class .files
         $(this).parent().find(".files").html($(this).val().replace("C:\\fakepath\\", ""));
        }else{
         // Si no tiene valor, se muestran los puntos ...
         $(this).parent().find(".files").html("...");
        }
    });
 
 
    $(document).on("click",".anex-up",function() {
       $("#up_form tbody tr:eq(0)").clone().appendTo("#up_form tbody").append('<td class="eliminar"><div id="eliminar">x</div></td>');
        // (Se selecciona la ultima fila agregada, y se modifica el valor html del elemento con la clase 'files')
        $("#up_form tbody tr:eq(-1)").find(".files").html("..."); // NUEVA LINEA
     
    });
     
    $(document).on("click",".eliminar",function(){
        var parent = $(this).parents().get(0);
        $(parent).remove();
    });
});
 

- Y para usar el Datepicker uso lo siguiente, esto lo tengo en el html donde tengo el formulario.

Código HTML:

<script src="script/jquery-2.1.1.min.js"></script>
<script src="script/jquery-ui.js"></script>
      <script>
          $(document).ready(function() {
            $( ".datepicker" ).datepicker();
            $( ".datepicke" ).datepicker();
          });
      </script>
 

- Alguna idea? espero puedan ayudarme un Saludo.

[andresgarciadev]

es por que al iniciar le estas dando a todos

Código Javascript:

$( ".datepicker" ).datepicker();
 

pero despues de clonar ese input deberias asignarle tambien la funcion

Código Javascript:

.datepicker()
 

para que tambien sea uno

[slikp]

- Buenas andresgarciadev, gracias por respondes por lo que me comentas igual no entiendo que tiene de malo asignarle a todos al iniciar el .datepicker()?? porque yo quiero que todos los inputs incluso los que se clonen hereden esta funcion ya que si se los doy en primera instancia se supone que al clonarlo los clones deberian de tenerlo no?

- De igual forma como comentas no tengo idea de donde asignar el .datepicker() despues de clonar como sugieres en tu segundo parrafo. Donde deberia colocarlo ?

[Alexis88]

Esa asignación inicial solo afecta a los elementos que se encontraban en el DOM al momento de cargar la página; los que añadas después, aunque sean clones de elementos existentes y afectados por dicho widget, no tendrán el mismo comportamiento.

Al momento de clonar, aplica el widget datepicker para que dicho clon también tenga el comportamiento deseado.

Saludos

[slikp]

- Buenas Alexis88, gracias por responder en cierto modo entiendo lo que me dices pero aun no logro dar con la solucion, primero en mi ignorancia intente hacer lo que me sugeriste, "aplica el widget datepicker para que dicho clon también tenga el comportamiento deseado" .

- Cosas que intente a mi pensar, Este fragmento del codigo agregue el datepicker.

Código Javascript:

$(document).on("click",".anex-up",function() {
       $("#up_form tbody tr:eq(0)").clone().appendTo("#up_form tbody").append('<td class="eliminar"><div id="eliminar">x</div></td>');
        
        $("#up_form tbody tr:eq(-1)").find(".files").html("...");
        $("#up_form tbody tr:eq(-1)").find(".datepicker").datepicker(); // NUEVA LINEA
    $("#up_form tbody tr:eq(-1)").find(".datepicke").datepicker(); // NUEVA LINEA  
     
    });
 

- Y la verdad no entiendo porque no funciono entonces sin darme cuenta elimine esto.

Código Javascript:

<script>
          $(document).ready(function() {
            $( ".datepicker" ).datepicker();
            $( ".datepicke" ).datepicker();
          });
      </script>
 

- Aclaro El primer codigo que coloque aun no lo habia eliminado y cuando fui al programa todos los clones que enexe desplegaban el calendario sin embargo los input Originales no hacian nada.




-Agregue denuevo.

Código Javascript:

<script>
          $(document).ready(function() {
            $( ".datepicker" ).datepicker();
            $( ".datepicke" ).datepicker();
          });
      </script>
 

- Y los inputs Originales despliegan el calendario y los Clonados ahora no hacen absolutamente nada. Y no se que tan mal hice lo siguiente pero intente hacer una condicion de la siguiente manera Sin ningun resultado...

Código Javascript:

$(document).ready(function() {
            if($("#up_form tbody tr:eq(-1)").find(".datepicker")){
                $("#up_form tbody tr:eq(-1)").find(".datepicker").datepicker(); // NUEVA LINEA
                $("#up_form tbody tr:eq(-1)").find(".datepicke").datepicker(); // NUEVA LINEA   
            }else {
                $(".datepicker").datepicker();
                $(".datepicke").datepicker();
            }
          });
 

- Seguire intentando de momento espero puedan ayudarme, Saludos.

PD: Intente hacer tambien unas cosas con el Evento LIVE que lei unas cosas sobre el y tampoco puede solucionar y trate de hacer tambien los BIND sobre elementos Existentes y nada :/ .