0

我正在尝试使用 Bootstrap datetimepicker，但我使用的 jQuery 代码似乎根本不起作用。我正在分解 CodePen 中其他人的工作代码（使用他们的 jQuery 代码），但它在我的身上不起作用，我已经多次检查了类、id 和库。这里无脑。

我想知道其他更清晰的眼睛是否会发现问题。

这是我的CodePen：https ://codepen.io/fergos2/pen/xxxeXqa

这是我的基础：https ://codepen.io/johnfinkdesign/pen/NRyBZb

在此先感谢您的帮助！

if (/Mobi/.test(navigator.userAgent)) {
  // if mobile device, use native pickers
  $(".date-container input").attr("type", "date");
  $(".time-container input").attr("type", "time");
} else {
  // if desktop device, use DateTimePicker
  $("#datepicker").datetimepicker({
    useCurrent: false,
    format: "DD-MM-YYYY",
    
    // disabling past dates
    minDate: moment(), 
    
    showTodayButton: true,
    icons: {
      next: "fa fa-chevron-right",
      previous: "fa fa-chevron-left",
      today: 'todayText',
    }
  });
  $("#timepicker").datetimepicker({
    format: "LT",
    icons: {
      up: "fa fa-chevron-up",
      down: "fa fa-chevron-down"
    }
  });
}
.container {
  padding: 20px;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  input {
    width: 20vw;
    padding: 10px;
    outline: none;
    border: 1px solid black;
    border-radius: 0.25rem;
  }
}

.date-container {
  position: relative;
  
  margin-bottom: 10px;
}

.time-container {
  position: relative;
}

.date-icon,
.time-icon {
  position: absolute;
  bottom: 0;
  right: 0;

  cursor: pointer;
  color: #495057;
  white-space: nowrap;
  background-color: #e9ecef;
  padding: .64rem .75rem;
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
  border: 1px solid black;
}


.todayText:before {
  content: "Today's Date"
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <form>
    <div class="date-container" id="datepicker">
      <input placeholder="DD/MM/YYYY">
      <span class="date-icon">
         <i class="fa fa-calendar"></i>
       </span>
    </div>

    <div class="time-container" id="timepicker">
      <input placeholder="HH:MM">
      <span class="time-icon">
         <i class="fa fa-clock"></i>
       </span>
    </div>
  </form>
</div>

4

0 回答 0