jQuery Datepicker 图标显示在输入框下方而不是右侧

Question

我刚刚开始使用 jQuery Datepicker 并遇到了问题。我显示了日历图标，但它显示在输入框下方而不是右侧。由于日历图标是由 jQuery 代码调用的，我应该使用什么选项来让它内联显示？这是我的相关代码。谢谢。

<script>
$(function() {
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "calendar_icon.gif",
        buttonImageOnly: true,
        buttonText: "Open calendar"
    });
});
</script>
Date: <input type="text" id="datepicker" />

Answer 1

既然你没有提到任何关于你的CSS的内容，我猜这就是你的问题所在。您需要将 ui-datepicker-trigger 类添加到您的 css 文件中。这将由函数自动分配，因此您无需更改输入以包含 class="ui-datepicker-trigger"。我只是复制并粘贴我在我的 css 文件之一中使用的内容。您需要的部分是 display: inline 部分，但我认为您可能会从整个事情中得到一些用处。

.ui-datepicker-trigger {
    display: inline;
    padding:0px;
    padding-left:3px;
    vertical-align:baseline;
    position:relative;
}

为了进一步扩展这一点，如果您有一些通用的 CSS 行为导致它显示在输入框下方，则这是必要的。