jQuery: how do I activate a datepicker from an element that is separate from the input field that the datepicker inserts the date into?

Question

This does not work the way I want to. currently, the text field activates the datepicker. but I want the click of the button to activate the datepicker:

  <script type="text/javascript">
        $j(function() {
            $j(".prop-expiry input").datepicker({
                showTrigger: '#exp-date-button'
            });
        });
    </script>

This does, but I'd like to be able to use a hover image for the date select button (currently, it shows both the img, and the hover img... cause the png is a sprite.)

<script type="text/javascript"> 
$(function() {
    $(".prop-expiry input").datepicker({
        showOn: 'button',
        buttonImage: '..images/btn_datepicker.png',
        buttonImageOnly: true
    });
});
</script> 

And my field / button where I want the datepicker to show up:

<input class="input-field hasDatepicker" 
       id="object_expires_at" 
       name="object[expires_at]" 
       onclick="$j('.prop-expiry input').val(''); 
                $j('.prop-expiry input').css('color', 'black');" 
       size="30" type="text" 
       value="Enter or pick a date">
<a id="exp-date-button" class="date-picker">Expiration Date</a>

What I want: user clicks a#exp-date-button

and then the datepicker appears.

ideas?

Answer 1

As i understand what your code does you should do something like that:

$("#exp-date-button").datepicker({
     /* your config */
});

For the hover state i suggest a css solution. Less javascript is always better ;) and which jQuery Datepicker are you using?