jquery - 日期选择器不工作

Question

我正在尝试在我的网站上显示一个开始日期和开始日期。但他们在彼此之下，我希望他们并排。我已经使用了 display:inline 但它仍然没有用。我在两个输入字段上都有一个日期选择器，但它只适用于一个输入字段。完全不知道为什么。显示的日期选择器显示在其他输入框下方，因此您只能部分看到它。有谁知道如何解决这些问题。非常感谢任何帮助。

HTML

<h3> Set your holiday dates </h3> 

    <p class="date"> Date From: </p>
    <input type="text" id="datepickerdoc"> 
    <p class="date">Date To: </p> 
    <input type="text" id="datepickerdoc"> 

已更新

 <h3> Search for your hotel you booked </h3> 
 <div class="input-group">
            <input type="text" name="search" id="searchHotel" class="form-control"/>
                <a href="#Hotels"><span class="input-group-addon" value="search" id="submit" name="submit">
                <i class="fa fa-search"></i>
                </span></a>
        </div>

j查询

$(function () {
    $("#datepickerdoc").datepicker();
});

CSS

.date{
    display:inline;
}


#searchHotel {
    max-width: 20%;
}

Answer 1

您的 CSS 将无法工作，因为您的目标是 p 标签，但日期选择器不在 p 标签内，并且您为日期选择器使用了相同的 ID 两次，但可以为此使用一个类:

尝试这样的事情:

<h3> Set your holiday dates </h3> 

    <span class="dpWrapper"><p class="date"> Date From: </p>
    <input type="text" class="datepickerdoc"> </span>
    <span class="dpWrapper"><p class="date">Date To: </p> 
    <input type="text" class="datepickerdoc"> </span>

CSS:

.dpWrapper {
  display:inline-block;
}

jQuery:

$(function () {
    $(".datepickerdoc").datepicker();
});

工作 JSFiddle https://jsfiddle.net/cfy053aw/1/