Question

Datepicker和timepicker与jquery-3.2.1.slim.min.js popper.min.js一起使用并且在删除它时模态和bootstrap轮播不起作用如何解决这个问题？

标题文件

.ui-timepicker-container.ui-timepicker-standard {
  z-index: 100000 !important;
}

.input-group-addon {
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.clsDatePicker {
  z-index: 100000;
}

<!-- time picker-->
<link rel="stylesheet" href="//http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<!-- time picker css and js before body timepicker.io-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" crossorigin="anonymous"></script>

<div class="form-group">
  <div class="input-group">
    <label for="datePicker" class="col-form-label">Preferred date :</label>
    <input type="text" name="datePicker" id="datePicker" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="fa fa-calendar"></i></span>
  </div>
</div>

<div class="form-group">
  <label for="timePicker">Preferred Time:</label>
  <div class="input-group input-append time" id="timePicker">
    <input type="text" class="timepicker form-control" name="timePicker" tabindex="4" required="" />
    <span class="input-group-addon add-on"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
  </div>
</div>

日期选取器无法在bootstrap 4网页上运行

0 个答案: