日历没有出现在它应该出现的地方！ jQuery

Question

我对 jQuery 还是很陌生。我有一个带有一些日期选择器日历的表单，但是当单击日历字段时，实际日历不会显示在该字段旁边。相反，它出现在我页面的顶部。谁能发现为什么会这样？谢谢。

$("#datepicker6").datepicker({
  inline: true,
  showOtherMonths: true,
  dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});

$("#datepicker7").datepicker({
  inline: true,
  showOtherMonths: true,
  dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});

 .ui-datepicker {
   border-radius: 1px;
   background-color: #ffffff;
 }

 #datepicker-inline {
   display: inline-block;
   margin: 1% auto;
 }

 .ui-datepicker-header {
   border-radius: 1px;
   background: #ffffff;
 }

 .ui-datepicker-prev,
 .ui-datepicker-next {
   border-radius: 1px;
 }

 .ui-datepicker thead {
   background-color: #ffffff;
   border-radius: 1px;
 }
 .ui-datepicker th {
   text-transform: uppercase;
   font-size: 8pt;
 }
 .ui-datepicker td span,
 .ui-datepicker td a {
   font-weight: bold;
   text-align: center;
   width: 32px;
   height: 32px;
   line-height: 32px;
 }

 .ui-datepicker-calendar .ui-state-default {
   background: #ededed;
 }

 .ui-datepicker-unselectable .ui-state-default {
   background: #f4f4f4;
   color: #b4b3b3;
 }

 .ui-datepicker-calendar .ui-state-hover {
   background: #f7f7f7;
 }

 .ui-datepicker-calendar .ui-state-active {
   background: #6eafbf;
   color: #e0e0e0;
   border: 1px solid #55838f;
   position: relative;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>


<div id='UIItem20' style="display: inline-block">
  What is the estimated deployment start date?
  <br>
  <br>
  <input type="text" id="datepicker6">
  <br>
  <br>
</div>

<div id='UIItem21' style="display: inline-block">
  What is the estimated deployment completion date?
  <br>
  <br>
  <input type="text" id="datepicker7">
  <br>
  <br>
</div>

Answer 1

我编辑了问题并将您的代码添加到 sn-p。

即使在 sn-p 中，它似乎 工作正常（日历就在输入字段下方）。 您的页面中可能有一些其他样式使日期选择器的行为与您所说的一样。

提示：在 datepicker 元素上使用浏览器的开发人员工具 (F12) 查看应用的样式来自何处。

看看有一些改进的代码。

$("#datepicker6").datepicker({
  inline: true,
  showOtherMonths: true,
  dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});

$("#datepicker7").datepicker({
  inline: true,
  showOtherMonths: true,
  dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});

.ui-datepicker {
   border-radius: 1px;
   background-color: #ffffff;
 }

 #datepicker-inline {
   display: inline-block;
   margin: 1% auto;
 }

 .ui-datepicker-header {
   border-radius: 1px;
   background: #ffffff;
 }

 .ui-datepicker-prev,
 .ui-datepicker-next {
   border-radius: 1px;
 }

 .ui-datepicker thead {
   background-color: #ffffff;
   border-radius: 1px;
 }
 .ui-datepicker th {
   text-transform: uppercase;
   font-size: 8pt;
 }
 .ui-datepicker td span,
 .ui-datepicker td a {
   font-weight: bold;
   text-align: center;
   width: 32px;
   height: 32px;
   line-height: 32px;
 }

 .ui-datepicker-calendar .ui-state-default {
   background: #ededed;
 }

 .ui-datepicker-unselectable .ui-state-default {
   background: #f4f4f4;
   color: #b4b3b3;
 }

 .ui-datepicker-calendar .ui-state-hover {
   background: #f7f7f7;
 }

 .ui-datepicker-calendar .ui-state-active {
   background: #6eafbf;
   color: #e0e0e0;
   border: 1px solid #55838f;
   position: relative;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"></style>


<div id='UIItem20' style="display: inline-block">
  <p>What is the estimated deployment start date?</p>
  <input type="text" id="datepicker6" />
</div>

<div id='UIItem21' style="display: inline-block">
  <p>What is the estimated deployment completion date?</p>
  <input type="text" id="datepicker7" />
</div>

提示2：避免使用<br> 标签来分隔你的html 行。使用类和 css 属性，例如边距、填充、行高等...（这是一种更好的做法）