Jquery - 时间选择器（jonthornton）不工作

Question

我无法让我的时间选择器工作（即，当我单击输入字段时没有任何反应）。我正在使用这个例子：

https://www.jonthornton.com/jquery-timepicker/

获得：

html:

<!-- Time picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<!-- Time picker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" />

<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group">
        <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="startDate">Start Time:</label>
        <div class="input-group timepicker" id="timePicker1">
            <input type="text" class="form-control" id="startTime" name="startTime" placeholder="hh:mm">
            <span class="input-group-addon" style="background-color:#ddd;">
                <i class="fa fa-clock"></i>
            </span>
        </div>
    </div>
</div>

js:

$(document).ready(function(){
    $("#timePicker1").timepicker({'scrollDefault': 'now'});
});

我正在寻找一个 Bootstrap 5 时间选择器；但是我只能找到一个我需要付费的。

还有时钟图标不显示。

Answer 1

看起来您只是定位了错误的元素，尝试将其添加到输入字段。
关于图标，你只需要加载'Font awesome' css 文件。

-- 基于cmets编辑--

$(document).ready(function() {
  $("#startTime").timepicker({
    scrollDefault: '08:00',
    timeFormat: 'H:i a',
    step: 5,
  });
});

<!-- Font Awesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">

<!-- Added jQuery just so it works here on Stack Overflow too. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Time picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.13.18/jquery.timepicker.min.js"></script>

<!-- Time picker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.13.18/jquery.timepicker.min.css" />

<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
  <div class="form-group">
    <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="startTime">Start Time:</label>
    <div class="input-group timepicker" id="timePicker1">
      <input type="text" class="form-control" id="startTime" name="startTime" placeholder="hh:mm">
      <span class="input-group-addon" style="background-color:#ddd;">
        <i class="fa fa-clock"></i>
      </span>
    </div>
  </div>
  
  <div class="form-group">
    <br><br>Sample below is just plain html.<br>
    <div class="input-group timepicker">
      <select>
        <option>Hour</option>
        <option>08</option>
        <option>09</option>
      </select>
      <select>
        <option>Minutes</option>
        <option>00</option>
        <option>05</option>
        <option>10</option>
        <option>15</option>
      </select>
      <select>
        <option>AM/PM</option>
        <option>AM</option>
        <option>PM</option>
      </select>
    </div>
  </div>
</div>