22

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

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

6 回答 6

29

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

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

例如： button.ui-datepicker-trigger img

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

于 2012-04-20T04:41:33.327 回答
28

在您的页面中添加自定义 CSS

<style>
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px }
 /* {} is the value according to your need */
</style>
于 2012-04-20T04:41:18.573 回答
12

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

例子：

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

$(".ui-datepicker-trigger").css("margin-bottom","-6px");
于 2013-05-26T10:45:42.560 回答
1

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

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

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

            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";
                }
            }
于 2012-12-26T21:33:53.737 回答
1

应用这个 CSS：

.ui-datepicker-trigger {
   position: absolute;
}
于 2015-03-13T07:20:03.407 回答
0

如果您使用自己的个性化图像作为日历图标，那么您可以简单地制作所需大小的图像。就我而言，我的输入框的高度是24px，图标大小是16X16. 我只是编辑了图像的大小并制作了它24X24，问题就解决了。

于 2012-06-03T11:40:43.513 回答