jQuery Date Picker not working on Chrome

Question

I've a jQuery UI Calendar as below and it works on IE only not on Chrome:

<input type="image" src="/images/caleder.jpg" id="btnCalendar" />

<script type="text/javascript">
$(function () {
    $("#btnPeriodCal").datepicker();
});
</script>

If I change type="text" it seems to work. Could someone please help me with how to resolve the above issue. I can't use type="text" as I need to show the image.

Thanks.

Answer 1

I have a sample problem with date picker.

I used date picker and it worked fine in Firefox and IE but not in chrome. I can see the calender when I click the input field. I selected the date but the date values are not entering in input field.

I don't have option so I changed type='text' then it works in chrome..

Answer 2

You can use a handler:

<script>
$(function() {
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true
    });
});
</script>

Hope this works! :)

Answer 3

I had the same problem. And I thought why input could work, but button could not. The trick is that input gets focus when clicked, button doesn't. Try this:

$(function () {
    $("#btnPeriodCal").datepicker().click(function () { $(this).focus(); });
});