Question

jquery UI date picker puts a text on top of a button instead of the image which I attempt to link to in the Jquery. This occurs on submit and when IE 8 is in compatibility mode. Has anybody ever come across this? This is the weirdest thing I have ever seen. Anybody have any idea why this is going on?

Let me show you a picture of what I am experiencing.

Before,

After.

Here is the code that i use for the DatePicker

$(".datepicker1").datepicker({
        showOn: 'both',
        buttonImage: '<%=Url.Content("~/images/calendar.gif")%>',
        dateFormat: 'mm/dd/yy',
        changeMonth: true,
        changeYear: true
    });

One thing that occurred to me is that my jquery validator might be overwriting something…
Here is my jquery code…

$("#temp1").validate({
        rules: {
            HospitalFinNumber: {
                required: true,
                minlength: 6
            },
            DateOfBirth: {
                required: true
            },
            AdmitDate: {
                required: true
            }
        },
        messages: {
            HospitalFinNumber: 'Please Enter a Hospital Fin number',
            DateOfBirth: 'Please enter a valid DateOfBirth',
            AdmitDate: 'Please select an Admin Date'
        },
        errorElement: "div",
        wrapper: "div",
        errorPlaceMent: function (error, element) {
            element.before(error);
            offset = element.offset();
            error.insertBefore(element);
            error.css('position', 'absolute');
            error.css('left', offset.left);
            error.css('top', offset.top - element.outerHeight());
        }
    });

I guess it also has something to do with the button width getting wider. How can I ensure that the button width always stays the same? That might solve the problem. Also, if you don’t have an answer, please suggest where I can go to learn more about the problem, and possible way’s to fix it. Any help at all would be a step in the right direction. ALso, I hope that this particular post doesn’t put me over my 30 day total! :-).
Also, How can I set the width of the error.css so that it doesn’t go nuts when the error message pops up?

UPDATE Has to do with how I validate I guess

I am thinking this has to do with how I place my error element in my table.
How can I place my error message correctly inside a table column,Row?

Answer 1

set buttonImageOnly to true…

buttonImageOnly: true

That did it!