Question

我正在使用jquery日期选择器日历图标触发器图像在文本框附近默认是在顶部我想设置图像大小（高度）与文本框高度相同请给我一些建议我的代码是

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

Answer 1

用firebug检查元素，我得到了这个：

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

然后，您可以使用该CSS类ui-datepicker-trigger。

Answer 2

在页面中添加自定义CSS

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

Answer 3

您可以使用jQuery编辑类.ui-datepicker-trigger，但在datepicker函数之后进行编辑很重要。

示例：

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

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

Answer 4

这些都不适合我。看来jQuery在离开ready函数时设置了图像按钮的height属性。因此，如果您尝试在ready函数中设置height属性，它将被覆盖为26px。所以我创建了一个单独的函数来在body标签的onload事件中运行。它将按钮的height属性更新为我想要的内容：

// 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;

我做了更多的工作，我发现上面的代码有一个bug。它会导致单击事件失败，并且单击图像时不会显示日历。我不知道为什么，但我找到了一种更好的方法。上面的方法是改变风格的笨重（懒惰？）方式。正确的方法是这样的：

            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 5

如果您使用自己的个性化图像作为日历图标，那么您只需制作所需尺寸的图像即可。对于我的情况，我的输入框的高度为24px，图标大小为16X16。我只是编辑了图像的大小并将其设为24X24，问题就解决了。

Answer 6

应用此CSS：

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

如何设置尺寸和; jquery Datepicker日历图标触发器图像的位置

6 个答案: