¿Como hago para mostrar el datepicker desde un botón?

[plitre_sys19]

Buenas noches! he intentado hacer funcionar esto pero nada, estoy tratando de que al seleccionar el icono del calendario aparezca el calendario de jquery iu pero no me parece el calendario, este es el código que estoy utilizando:

Código HTML:

<div class="input-group">
<input type="text" name="fecha" id="fecha" class="form-control"/>
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div> 

Código:

$("#fecha").datepicker();

asi al darle click al input me sale pero quiero que al darle click al span que contiene el icono, como hago para que me funcione? estoy utilizando bootstrap 3 pero el datepicker quiero que sea del jquery iu

[Alexis88]

Utiliza el método show.

Código Javascript:

$("span.input-group-addon").on("click", function(){
    $("#fecha").datepicker("show");
});
 

Saludos

[plitre_sys19]

Hola Alexis88 gracias por responderme, lo probe pero nada que funciona, es decir, no se visualiza

Me acabo de dar cuenta que recibo este error:
Uncaught TypeError: Cannot read property 'settings' of undefined, a que se debe?

[Alexis88]

Que la selección que haces, no devuelve elemento alguno. Si estás colocando tu código en la cabecera del documento, asegúrate de colocarlo dentro de esto:

Código Javascript:

$(document).ready(function(){
    //Aquí va tu código
});
 

Por otra parte, el ejemplo que te mostré funciona con jQuery UI, si estás usando otra librería, quizá no funcione. También te sugiero usar una sola librería para evitar posibles conflictos, aunque jQuery ofrece una solución para esos casos.

DEMO

Saludos

[plitre_sys19]

Gracias Alexis88 ahora si funciona, habia colocado malo en el jquery, lo arregle como el demo que hiciste y ahora si funciona, mucha gracias