JavaScript - AYUDA! Necesito usar mas de una vez un Calendario (Datepicker)

   
Vista:

AYUDA! Necesito usar mas de una vez un Calendario (Datepicker)

Publicado por Sandra (3 intervenciones) el 17/07/2014 21:33:23
Buenas, estoy teniendo un problema en javascript, he colocado un boton de calendario para seleccionar la fecha de ahi, y ademas tambien he colocado un boton que me genere una nueva fila y otro que la elimine, el problema esta en que cuando genero una nueva fila el calendario no me funciona, solo me funciona en la primera, como podria solucionar eso? alguien tiene alguna idea?

A continuacion les coloco el codigo que estoy utilizando:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<%@page contentType="text/html" pageEncoding="UTF-8"%>
 
    <!DOCTYPE html>
 
    <html>
        <head>
            <title>Gestionar Proyecto</title>
 
            <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
            <script type="text/javascript" src="jquery-ui.min.js"></script>
            <script type="text/javascript" src="jquery.ui.datepicker-es.js"></script>
            <link href="jquery-ui.min.css" rel="stylesheet" type="text/css">
 
            <script type="text/javascript">
 
               $(function(){
 
                    tabla = $('#act');
                    tr = $('#fila', tabla);
                    $('#agregarFila').live('click', function (){
                        tr.clone().appendTo(tabla).find(':text, :hidden').val('');
 
                    });
 
                    $("#eliminarActividad").live('click', function (){
                        var tr = $(this).closest('tr');
                        tr.remove();
                    });
 
 
                    $("#fecha_inicio_tarea").datepicker({
                        showOn: 'button',
                        buttonImage: 'calendar.gif',
                        buttonImageOnly: true,
                        changeMonth:true,
                        changeYear:true,
                        dateFormat: 'yy/mm/dd'
 
                    });
 
                    $("#fecha_fin_tarea").datepicker({
                        showOn: 'button',
                        buttonImage: 'calendar.gif',
                        buttonImageOnly: true,
                        changeMonth:true,
                        changeYear:true,
                        dateFormat: 'yy/mm/dd'
                    });
 
                });
 
            </script>
 
        </head>
        <body>
 
            <h3>Ingrese la informacion del nuevo proyecto</h3>
 
            <form name="formAgregarProyecto" method="post" action="guardarProyecto.jsp">
 
                <table><tr><td>
 
                <table id="act" border="1">
 
                    <tr>
 
                        <td>Actividades</td>
                        <td>Fecha de Inicio</td>
                        <td>Fecha de Finalización</td>
                        <td>Estatus</td>
                        <td>Observacion</td>
                        <td></td>
 
                    </tr>
 
                    <tr id="fila">
 
 
                        <td><input type="text" name="nombre_tarea[]" /></td>
                        <td><input type="text" name="fecha_inicio_tarea[]" id="fecha_inicio_tarea" readonly/></td>
                        <td><input type="text" name="fecha_fin_tarea[]" id="fecha_fin_tarea" readonly /></td>
                        <td><select name="estatus_tarea[]" size="1">
                                    <option value="1">Iniciado</option>
                                    <option value="2">Proceso</option>
                                    <option value="3">Finalizado</option>
                            </select></td>
                        <td><textarea rows="1" cols="17" name="observacion_tarea[]" maxlength="400"></textarea></td>
                        <td><input type="button" value="-" id="eliminarActividad"/></td>
                    </tr>
                </table>
                </td>
                <td>
                    <input type="button" value="+" id="agregarFila" />
                </td></tr></table>
 
                <input type="button" value="Atras" onClick="window.location.href='gestionarProyecto.jsp'" />
                <input type="submit" name="Guardar" value="Guardar"  />
                <input type="reset" value="Limpiar" />
            </form>
 
        </body>
    </html>

Habia intentado solucionarlo colocando corchetes, tanto en la funcion javascriot #fecha_inicio_tarea[] y #fecha_fin_tarea[], y en html id="fecha_inicio_tarea[]" y id="fecha_fin_tarea[]" pero me dice que no es compatible.

Por favor, necesito ayuda, se lo agradecieria mucho.
Espero que puedan ayudarme.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder