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的任何事情，我猜你的问题就在那里。您需要在css文件中添加一个ui-datepicker-trigger类。这将自动由函数分配，因此您无需更改输入以包含class =“ui-datepicker-trigger”。我只是复制并粘贴我在我的一个css文件中使用的内容。你需要的部分是显示：内联部分，但我认为你可能会在整个事情中得到一些用处。

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

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

Answer 2

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

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

如果您需要更改日期格式，那么您可以选择

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

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

2 个答案: