Using class to call jQuery UI date-picker doesn't work

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 );
    }
});

mu is too short · Accepted Answer · 2011-09-26 07:43:49Z

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.

answered Sep 26, 2011 at 7:43

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using class to call jQuery UI date-picker doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related