How to Set the size & position of jquery Date picker calendar icon trigger image

Question

i am using jquery date picker the calendar icon trigger image near textbox is by default is on top i want to set the image size (height) same as textbox height please give

Answer 1

Apply this CSS:

.ui-datepicker-trigger {
   position: absolute;
}

Answer 2

None of this worked for me. It appears that jQuery sets the height property of the image button when leaving the ready function. So if you try to set the height property in the ready function it gets overwritten to 26px. So I created a separate function to run in the onload event of the body tag. It updates the height property of the button to what I want like this:

// sample jQuery datepicker button tag: <img style="margin: 0px; padding: 2px; height: 26px; vertical-align: bottom;" class="ui-datepicker-trigger" >
var oDateCell = oTableRow.cells[2];
var sDateCellHTML = oDateCell.innerHTML;
var sRevisedHTML = sDateCellHTML.replace("height: 26px;", "height: 13px;");
oDateCell.innerHTML = sRevisedHTML;

I did some more work on this and I discovered that the code above has a bug. It causes the click event to fail and the calendar does not display when clicking the image. I don't know why, but I found a better way that does work. The method above was a clunky (lazy?) way of changing the style. The correct way is like this:

            var oTableRow = oTable.rows[iRow];
            if (oTableRow.cells.length > 2)
            {
                var oDateCell = oTableRow.cells[2];
                if (oDateCell.childNodes.length > 1)
                {
                    var oImage = oDateCell.childNodes[1];
                    oImage.style.height = "13px";
                }
            }

Answer 3

Add custom CSS in your page

<style>
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px }
 /* {} is the value according to your need */
</style>

Answer 4

If you are using your own personalized image for the calendar icon then you can simply make the image of the size you want. For my case my input box's height was 24px and the icon size was 16X16. I just edited the size of the image and made it 24X24 and the problem was solved.

Answer 5

Inspecting the element with firebug, I got this:

<img class="ui-datepicker-trigger" src="http://xxxxx/officeprime/assets/img/calendar.gif" alt="..." title="..."/>

You can then work with that CSS class ui-datepicker-trigger.

Answer 6

You can edit class .ui-datepicker-trigger with jQuery but it's important to make editing after datepicker function.

Example:

$(#textbox1).datepicker({
        showOn: "button",
        buttonImage: "calendar_1.png",
        buttonImageOnly: true )};

$(".ui-datepicker-trigger").css("margin-bottom","-6px");