javascript - 日历没有出现在它应该出现的地方! 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

我编辑了问题并将您的代码添加到了代码片段中。

即使在代码段中，它似乎也工作正常(日历位于输入字段下方)。您的页面中可能存在某些其他样式，使日期选择器的行为就像您所说的那样。

提示:在日期选择器元素上使用浏览器的开发人员工具 (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 属性，如边距、填充、行高等...(这是更好的做法)