How to display the jQuery UI DataPicker dynamically depending on what is clicked

Any idea to get the jQuery UI DatePicker to appear at the position such as below and left aligned with the icon if the small calendar icon button is clicked, and still open it below the input box and left aligned with the input box if the input textbox is clicked?

I guess if I can detect what is clicked, then can use beforeShow as below:

beforeShow: function(input,inst){
    //check if the icon is clicked, then
  开发者_Go百科      inst.dpDiv.css(
            {
                marginLeft: input.offsetWidth + 5 + 'px'
            }
        );
    //end if
},

But how do I detect if the icon is clicked, then alter the default CSS?

Inside your handler, this refers to the element that was clicked.

In absence of code I would say use a click binding on this icon (http://api.jquery.com/click/)

And if you what to change the position http://jqueryui.com/demos/position/