Question

I’m using jQuery UI datepicker – the range version. I have a form and in the input field (text) of the “from date” I call the datepicker. It works fine.

The problem is that I also have in that field an image (of a calendar) that I set it’s class to be the same one as the field’s. BUT, while the field open the datepicker without problems, clicking the image seems do do nothing.
I know there are some questions regarding this issue, but nothing helps 😉

<input type="text" id="fromDate" value="Enter date" name="fromDate" class="fromDatePicker"/>
<img class="fromDatePicker" src="images/calender_icon_a1.jpg" id="ci1"/>

The js code:

$(function() {
$( ".fromDatePicker" ).datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd/mm/yy',
    altFormat: 'yymmdd',
    altField: "#fromDateFormatted",
    numberOfMonths: 2,
    onSelect: function( selectedDate ) {
        $('#toDate').datepicker( "option", "minDate", selectedDate );
    }
});

Answer 1

Apparently you can’t bind a datepicker to an image. If we look at the datepicker source, we see this:

if (nodeName == 'input') {
    this._connectDatepicker(target, inst);
} else if (inline) {
    this._inlineDatepicker(target, inst);
}

and inline is true if and only if nodeName is div or span. So when you try to bind the datepicker to an <img>, you get ignored without so much as a warning in the console.

If you look at the Icon Trigger example on the jQuery-UI demos page, you’ll see the approved way of activating the datepicker using an icon:

$('.fromDatePicker').datepicker({
    // existing options
    showOn: "both",
    buttonImage: "images/calendar_icon_a1.jpg", 
    buttonImageOnly: true
});

and then remove your img.fromDatePicker element entirely.