jQuery日期选择器图标显示在输入框下方，而不是右侧

我刚开始使用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" />

$（函数（）{
$（“#日期选择器”）。日期选择器({
展示：“按钮”，
buttonImage:“日历图标.gif”，
buttonImageOnly:正确，
按钮文字：“打开日历”
});
});
日期：

既然你没有提到你的css，我猜这就是你的问题所在。您需要将ui日期选择器触发器类添加到css文件中。这将由函数自动分配，因此您无需更改输入以包含class=“ui datepicker trigger”。我只是复制并粘贴我在css文件中使用的内容。您需要的部分是display:inline部分，但我想您可能会从整个过程中得到一些好处

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

---

如果您有一些通用的css行为导致它显示在输入框下方，则有必要对此进行进一步扩展。

如果您只需要在文本框中显示日期，则无需使用上述代码

   <script>$( "#datepicker" ).datepicker();</script>
   Date: <input type="text" id="datepicker" />

   $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val();