jQuery: datepicker - Calendar activated by the icon and the date field at the same time

Question

Hello, I've already looked around but couldn't find the exact solution/problem I'm having right now.

All I want is to have the calendar appear either by clicking on the calendar icon AND from the text field in which the date appears when selecting a date. Right now, after trying different properties, I can only have the calendar appear by one or the other, but not both: the icon and the field.

This is the code I'm using to activate it via the icon:

$("#datepicker").datepicker({
   showOn: 'button',
   buttonImage: 'images/icon-calendar.gif',
   buttonImageOnly: true,
   changeMonth: true,
   changeYear: true,
   showAnim: 'slideDown',
   duration: 'fast'
});

Is there a way to have the calendar appear by clicking on the icon AND the field as well?

Thanks.

Answer 1

Give your date picker field an id and try this:

<input type="text" name"whatever" id="datepickerfield" />

For the field:

$("#datepickerfield").datepicker({
 showOn: 'button',
 buttonImage: 'images/icon-calendar.gif',
 buttonImageOnly: true,
 changeMonth: true,
 changeYear: true,
 showAnim: 'slideDown',
 duration: 'fast'
});

Answer 2

try setting: showOn: 'both'

Answer 3

This is the working code to make the calendar appear when clicking on the icon AND on the date field, notice the "both" value:

$("#datepicker").datepicker({
 showOn: 'both',
 buttonImage: 'images/icon-calendar.gif',
 buttonImageOnly: true,
 changeMonth: true,
 changeYear: true,
 showAnim: 'slideDown',
 duration: 'fast'
});

Thanks to derek for his help.

Answer 4

Thank you all for the great tips. Much appreciated.