Ayuda por fis Añadir campos + calendarios

[mc1636]

Espero que me pueda ayudar tengo poco conocimiento en javascript y quisiera me corriera esta dos funciones para un formulario donde tengo que añadir campo tipo fecha con un calendario al lado para que el usuario seleccione la fecha desde este .

Código PHP:

  <script type="text/javascript"> 
 
emails=0; 
 
function agregar3() { 
    emails=emails+1; 
 
     
$("#campos3").append('<li class="email'+emails+'"></label><INPUT type="text" name="fecha" id="fecha"  value="" />&nbsp;&nbsp;</label><a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>'); 
 
 
 
$(function() { 
 
 
                $("#fecha").datepicker({ 
                    showOn: 'both', //Parametro para que se vea el icono del calendario 
                    buttonImageOnly: true, //Indicamos si queremos que solo se vea el icono y no el botón 
                    buttonImage: 'calendar.gif', //Indicamos el icono del botón 
                    firstDay: 1, //El primer día será el 1 
                    changeMonth: true, //Si se pueden cambiar los meses 
                    changeYear: true //Si se pueden cambiar los años 
                }); 
            }); 
 
} 
    </script>  
  

No se si su estructura este bien. pero mi idea es que vaya variado las llamada cada vez que se agregue un campo nuevo de fecha al formulario( el llamado entre las funciones son id="fecha" y $("#fecha") ).

y mi html

Código PHP:

  <label  for="fecha_entrega" >Fecha Entrega Labotrorio</label> 
 <ol id="campos3"> 
            <INPUT name="fecha_entrega[]" id="fecha_entrega"type="text" size="16" onclick="ds_sh(this);"  class="required, date"  readonly="readonly"/> 
 
<a href="#" onclick="agregar3();">Agregar</a></label> 
</ol>  
   

[4ng3r]

Haber si estoy en lo correcto .... cada vez que se llama el onclick agregar3 ... entonces en esta función se debe generar un nuevo campo .... entonces estos auto-generados debe ser creados con el mismo name no con el mismo id y se debe llamar de nuevo el selector de jquery de esta forma:

Código Javascript:

$("name=nameElemento").datepicker({
    .....
})
 

no se si estoy respondiendo a su pregunta ??

[mc1636]

Iniciado por 4ng3r

Haber si estoy en lo correcto .... cada vez que se llama el onclick agregar3 ... entonces en esta función se debe generar un nuevo campo .... entonces estos auto-generados debe ser creados con el mismo name no con el mismo id y se debe llamar de nuevo el selector de jquery de esta forma:

Código Javascript:

$("name=nameElemento").datepicker({
    .....
})
 

no se si estoy respondiendo a su pregunta ??

Al principio si pero a lo que llega a agregar los campo me debe crear un nuevo campo con un nombre diferente donde se guarda la información a enviar y a su vez tengo que crear un llamado de función con un id desde ese campo que me esta añadiendo para que me abra un calendario donde el usuario seleccionar la fecha espero hacerme entender la idea que tengo y se hacer correr.

[4ng3r]

con el anterior codigo que le deje, le agrega un calendario a todos lo elementos que tiene el name tal !! y por que crearlo con un name diferente cual es la razon??

[mc1636]

Ya los probé pero me hace el llamado de la función del calendario, con el name no me llama la función tiene que ser con un id ya he probado ante el llamado con neme y no lo hace seria asi

Código PHP:

  <script type="text/javascript"> 
 
emails=0; 
 
function agregar3() { 
    emails=emails+1; 
 
     
$("#campos3").append('<li class="email'+emails+'"><label> </label><INPUT type="text"  name="fecha_entrega[]"  value="" />&nbsp;&nbsp;</label><a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>'); 
 
 
 
$(function () { 
 
 
                $( "#fecha_entrega[]").datepicker({ 
                    showOn: 'both', //Parametro para que se vea el icono del calendario 
                    buttonImageOnly: true, //Indicamos si queremos que solo se vea el icono y no el botón 
                    buttonImage: 'calendar.gif', //Indicamos el icono del botón 
                    firstDay: 1, //El primer día será el 1 
                    changeMonth: true, //Si se pueden cambiar los meses 
                    changeYear: true //Si se pueden cambiar los años 
                }); 
            }); 
 
} 
 
 
 
</script>  
  

[4ng3r]

Haber ... mire este codigo que se me ocurrio en un momentico ...

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="UI/css/ui-lightness/jquery-ui-1.8.6.custom.css" type="text/css">
    <script src="jquery.js"></script>
    <script src="UI/js/jquery-ui-1.8.6.custom.min.js"></script>
    <script>
      $(function(){
         $('input[name="fecha"]').datepicker({
            showOn: 'both', //Parametro para que se vea el icono del calendario
            buttonImageOnly: true, //Indicamos si queremos que solo se vea el icono y no el botón
            buttonImage: 'calendar.gif', //Indicamos el icono del botón
            firstDay: 1, //El primer día será el 1
            changeMonth: true, //Si se pueden cambiar los meses
            changeYear: true //Si se pueden cambiar los años
         });
         $("#op1").click(function(){
            $("#tablaFechas").append("<tr><td><input type='text' name='fecha'></td></tr>");
            $('input[name="fecha"]').datepicker({
              showOn: 'both', //Parametro para que se vea el icono del calendario
              buttonImageOnly: true, //Indicamos si queremos que solo se vea el icono y no el botón
              buttonImage: 'calendar.gif', //Indicamos el icono del botón
              firstDay: 1, //El primer día será el 1
              changeMonth: true, //Si se pueden cambiar los meses
              changeYear: true //Si se pueden cambiar los años
            });
         });
      })
    </script>
        
  </head>
 
  <body>
    <table id="tablaFechas" width="500">
      <tr>
        <td><input type="text" name="fecha"></td>
      </tr>
      
      <tfoot>
        <td><a href="javascript:void(0)" id="op1">Agregar Fecha</a></td>
      </tfoot>
    </table>
    
  </body>
 
</html>
 

recuerde: cambie las rutas del css y de los js .... esto fue lo primero que se ocurrio tal vez haya un forma mas optima tal vez le de una idea de lo que pienso ... espero que sea de ayuda

[mc1636]

Gracias por el aporte me orientarte con la forma en que incluiste a función de agregar en la de calendario y yo la vía al revés ya me corre pero tuve que aplicarles clase aclare otra cosa y disculpa el abuso para modificar esos datos que estoy agregado con un formulario para mostrarlo y darle la opción de corregir (si se pasaron de campos , o le faltaron o bien sea nada mas de cambiar la fecha debería colocar un for con tantos resultado me traiga una consulta de cuanta fechas hay en la base de dato relacionada al formulario y ahí colocar la función de agregar mas campo )

Dejo el código para que se le presente algo igual y

Código PHP:

   
<script type="text/javascript"> 
emails=0; 
function agregar3() { 
    emails=emails+1;     
 
$(function () { 
 
$("#campos3").append('<li class="email'+emails+'"><label> </label><INPUT type="text"  name="fecha_entrega[]" id="email'+emails+'" value="" />&nbsp;&nbsp;</label><a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>'); 
                $( 'input[id="email'+emails+'"]').datepicker({ 
                    showOn: 'both', //Parametro para que se vea el icono del calendario 
                    buttonImageOnly: true, //Indicamos si queremos que solo se vea el icono y no el botón 
                    buttonImage: 'calendar.gif', //Indicamos el icono del botón 
                    firstDay: 1, //El primer día será el 1 
                    changeMonth: true, //Si se pueden cambiar los meses 
                    changeYear: true //Si se pueden cambiar los años 
                }); 
            }); 
 
} 
</script>  
  

Código PHP:

  <label  for="fecha_entrega" >Fecha Entrega Labotrorio</label> 
 <ol id="campos3"> 
            <INPUT name="fecha_entrega[]" id="fecha_entrega"type="text" size="16" onclick="ds_sh(this);"  class="required, date"  readonly="readonly"/> 
 
<a href="#" onclick="agregar3();">Agregar</a></label> 
</ol>  
   

[mc1636]

disculpa espero que me puedas ayudar otra vez es que de funciones no se mucho sinceramente nada solo buscar la que me funcione pero esta tengo que hacer correr por que es la única que se adapta a mis necesidades y ahora tengo otros campo fecha desde hasta con su típica validaciones pero aplicando el código no puedo relacionar las clase y quisiera saber si me podrías ayudar para ver como declare las clases esta bien y su llamado.

Código PHP:

  <script type="text/javascript">
function agregar() {
    emails=emails+1;
$(function () {
$("#campos").append('<li class="email'+emails+', class="emaill'+emails+'"><label></label><INPUT type="text" name="desde[]" size="16" id="email"/><INPUT type="text" name="hasta[]" id="emaill"  size="16"  />&nbsp;&nbsp;<a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>');
       
                    var dates = $( "#email,#emaill").datepicker({
                        showOn: 'both', //Parametro para que se vea el icono del calendario
                    buttonImageOnly: true, //Indicamos si queremos que solo se vea el icono y no el botón
                    buttonImage: 'calendar.gif', //Indicamos el icono del botón
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "emaill" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" );
                                           date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
});
}
</script>  
  

de esta forma se muestra el calendario pero las fecha se ingresan todas en el primer campo que la conserva el id por lo que uso las clase pero como las estoy adaptado no me funcionan

Código PHP:

  <script type="text/javascript">
function agregar() {
    emails=emails+1;
$(function () {
$("#campos").append('<li class="email'+emails+', class="emaill'+emails+'"><label></label><INPUT type="text" name="desde[]" size="16" id="email"/><INPUT type="text" name="hasta[]" id="emaill"  size="16"  />&nbsp;&nbsp;<a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>');
           
                          var dates =$( 'input[id="email'+emails+'"]','input[id="emaill'+emails+'"]').datepicker({
                        showOn: 'both', //Parametro para que se vea el icono del calendario
                    buttonImageOnly: true, //Indicamos si queremos que solo se vea el icono y no el botón
                    buttonImage: 'calendar.gif', //Indicamos el icono del botón
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {

                var option = this.id == 'input[id="emaill'+emails+'"]' ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" );
                                           date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
});
}
</script>  
  

las funciones y llamados son

Código PHP:

  class="email'+emails+'", class="emaill'+emails+'"  
   

Código PHP:

       var dates =$( 'input[id="email'+emails+'"]','input[id="emaill'+emails+'"]').datepicker({  
   

Código PHP:

      var option = this.id == 'input[id="emaill'+emails+'"]' ? "minDate" : "maxDate",