tener dos datepicker en el mismo formulario

[maximendez88]

he encontrado una herramienta muy buena como lo es datepicker que crea un calendario en html con jquery...es muy bueno lo he utilizado muchas veces...por lo tanto, he logrado cambiarle los rangos etc... pero hay algo que me tiene un poco trancado.. yo necesito tener dos datepicker en el mismo form..... ya que uno es el dia que llega y otro es el dia que se va.... y el problema es que solo puedo ver uno de los calendarios... y el otro no me lo muestra.....el problema esta en que para que lo cargue hay que declararlo con un id en el div... ya que necesito que sea estatico... lo que pasa es que solo carga uno de los calendarios y el otro no.... dejo mi codigo por si alguien se apiada de mi alma... saludos..

Código HTML:

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

$("#datepicker").datepicker({
	changeMonth: true,
	changeYear: true,
	dateFormat: "yy-mm-dd",
	yearRange: "2012:2020",
	onSelect: function(dateText, inst) { 
	$("#datepicker_value").val(dateText);
	}
});

});

</script>





           <table>
   
   
    <tr>
   
    <td>Arrival Date:</td>
    
    
    

    
    
    <td><div id="datepicker"></div></td><td><input type="text" id="datepicker_value"  readonly="readonly"/></td>
   
   
    </tr>
   
   
    <tr>
    <td>Departure Date: </td>
   
    <td><div id="datepicker"></div></td><td><input type="text" id="datepicker_value" readonly="readonly" /></td>

   
       
   
    </tr>
   
   
   
    <td>Adjuntar una Foto</td>
    <td><input type="file" /></td>
   
    </table>

[Dradi7]

pero el error esta clarisimo estas usando dos id únicos debes leer primero la documentación no puede existir dos id únicos ponlos diferentes y en el script tambien has llamados diferentes

[maximendez88]

si ya lo resolvi.... en cuanto hice el post me di cuenta de como era la solucion... el problema es que no sabia como borrar el tema.... aqui dejo la solucion por si hay algun chambon como yo

Código HTML:

<script>

$().ready(function() {

$("#datepicker").datepicker({
	changeMonth: true,
	changeYear: true,
	dateFormat: "yy-mm-dd",
	yearRange: "1930:2012",
	onSelect: function(dateText, inst) { 
	$("#datepicker_value").val(dateText);
	}
});




$("#otrodatepicker").datepicker({
	changeMonth: true,
	changeYear: true,
	dateFormat: "yy-mm-dd",
	yearRange: "1930:2012",
	onSelect: function(dateText, inst) { 
	$("#otrodatepicker_value").val(dateText);
	}
});






});
</script>





     
           <table>
   
   
    <tr>
   
    <td>Arrival Date:</td>
    
    
    

    
    
    <td><div id="datepicker"></div></td><td><input type="text" id="datepicker_value" name="arrival"  readonly="readonly"/></td>
   
   
    </tr>
   
   
    <tr>
    <td>Departure Date: </td>
   
    <td><div id="otrodatepicker"></div></td><td><input type="text" id="otrodatepicker_value" name="departure" readonly="readonly" /></td>

   
       
   
    </tr>
   
   <tr>
   
   
    <td>Adjuntar una Foto</td>
    <td><input type="file" name="fotos" /></td>
   
    </table> 

[Ross88]

La mejor manera seria la siguiente:

<script type="text/javascript"><!--
$(function() {
$('input').filter('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: 'jquery/images/calendar.gif',
buttonImageOnly: true
});
});
--></script>
</head>

De esta manera no tienes que crear un id único para cada datepicker