日历没有出现在它所要求的地方！ jQuery的

Question

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

＆＃13;

＆＃13;

$("#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']
});

＆＃13;

 .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;
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

即使在代码段中，它似乎正常工作（日历位于输入字段下方）。您页面中可能有其他一些风格，这使得日期选择器的行为与您所说的相同。

提示：在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属性，如margin，padding，line-height等......（这是一种更好的做法）