Datepicker on both text field and image icon w/ alt dates Help!

Having a heck of a time with this.

Right now, just the image works to bring up the calendar. I am trying to get "both" of them to show. The input field and the image.

Here it is on jsbin: http://jsbin.com/ewadi3/3/

I tried showOn: both.. but not working!!

<script type="text/javascript">
$(function() {
        pickerOptions = {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'yy-mm-dd',
            altFormat: 'M d, yy',
            showOn: 'both',
            butto开发者_JAVA百科nImage: '/images/calendar.gif'
             };
        $('#beginDate').datepicker(pickerOptions);
        $('#beginDate').datepicker('option', 'altField', '#beginDate2');
        $('#endDate').datepicker(pickerOptions);
        $('#endDate').datepicker('option', 'altField', '#endDate2');
    });</script>

I'm thinking that you are re-initializing your date pickers. In the code above, you call the datePicker() function twice ->

$('#beginDate').datepicker(pickerOptions);
$('#beginDate').datepicker('option', 'altField', '#beginDate2');

The second time it's called, I believe that it's overwriting your pickerOptions. When I remove the second line for #beginDate.datepicker and #endDate.datepicker, it does show on both. I hope this helps!

JSFiddle example

From looking at the code in jsbin

  <td width="17" valign="top"><input type="hidden" name="beginDate" id="beginDate" value="" /></td>
    <td width="98" valign="top"><input type="text" id="beginDate2" size="12" value=""/></td>
    <td width="17" valign="top"><input type="hidden" name="endDate" id="endDate" value=""></td>
     <td width="98" valign="top"><input name="endDate2" type="text" id="endDate2" size="12" value="" />

You are setting the datepicker with pickerOptions on #beginDate and #endDate but those inputs are hidden, though the button is still displayed. The text fields that are visible have not been extended with datepicker.