jQuery 如何设置jquery日期选择器日历图标触发图像的大小和位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10240278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Set the size & position of jquery Date picker calendar icon trigger image
提问by UMAIR ALI
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 me some suggestions my code is
我正在使用 jquery 日期选择器文本框附近的日历图标触发图像默认位于顶部我想将图像大小（高度）设置为与文本框高度相同请给我一些建议我的代码是
$(#textbox1).datepicker({
showOn: "button",
buttonImage: "calendar_1.png",
buttonImageOnly: true
)};
回答by Gerep
回答by diEcho
Add custom CSS in your page
在页面中添加自定义 CSS
<style>
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px }
/* {} is the value according to your need */
</style>
回答by Adnan Mulalic
You can edit class .ui-datepicker-trigger with jQuery but it's important to make editing after datepicker function.
您可以使用 jQuery 编辑 .ui-datepicker-trigger 类，但在 datepicker 函数之后进行编辑很重要。
Example:
例子：
$(#textbox1).datepicker({
showOn: "button",
buttonImage: "calendar_1.png",
buttonImageOnly: true )};
$(".ui-datepicker-trigger").css("margin-bottom","-6px");
回答by Dallas Steve
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:
这些都不适合我。似乎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;
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";
}
}
回答by Ronak Patel
Apply this CSS:
应用此 CSS：
.ui-datepicker-trigger {
position: absolute;
}
回答by Bodhisatwa Ghosh
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 24pxand the icon size was 16X16. I just edited the size of the image and made it 24X24and the problem was solved.
如果您将自己的个性化图像用于日历图标，那么您只需制作所需大小的图像即可。就我而言，我的输入框的高度为24px，图标大小为16X16. 我刚刚编辑了图像的大小并制作了它24X24，问题就解决了。
