从另一个函数调用jQuery UI Datepicker

Question

The following is my code:

<script type="text/javascript">
$(function(){ //this is the datepicker function
    $( "#datepicker" ).datepicker();
});

function jsFunction(){
   // i want to call the datepicker function from here
}
</script>
</head>

html

<html:image alt="Calendar" src="/images/icon_calendar.gif" 
    value="reset" onclick="jsFunction();" />
<input type="text" id="datepicker" />

When I click on the text box, the text box will prompt a calendar to let me choose the date. This date picker is working fine.

I added in an image, and I want the text box to prompt the calendar when I click on the image instead of click on the text box. I would like to ask how to call the datepicker jquery from the onlick=jsFunction(); .

I an working in Java Struts2 framework.

Kindly advise/ help.

Answer 1

Correct way to set an icon trigger (via API):

$( "#datepicker" ).datepicker({
    showOn: "button",
    buttonImage: "/images/icon_calendar.gif",
    buttonImageOnly: true
});

http://jqueryui.com/datepicker/#icon-trigger

Answer 2

You can use the show method

function jsFunction(){
    $( "#datepicker" ).datepicker( "show" );
}

Demo: Fiddle

Answer 3

Try

function jsFunction(){
    $( "#datepicker" ).focus();
}

or

function jsFunction(){
    $( "#datepicker" ).click();
}

Answer 4

<script>

    $(function() {

      $("#datepic").datepicker({ showOn: 'button',buttonImage: 'image/calendar.gif'});

    });

</script>

<input type="text" id="datepic" />