Bootstrap 时间选择器未出现

Question

我的前端有以下代码。我无法让时间选择器出现。有什么帮助吗？

<!DOCTYPE HTML>
<html>
  <head>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script>

  <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" />

<script type="text/javascript">
  $(() => {
    $('#timepicker1').timepicker();
  });
</script>     

  </head>
  <body>
         <div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker1" type="text" class="form-control input-small">
            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>

  </body>
<html>

我在上面代码中提到的正确路径中拥有所有必需的源文件。另外，我在浏览器日志中没有看到任何错误。请帮我解决这个问题。

谢谢大家

编辑：我现在已经使用了 jsfiddle 中提供的所有源文件的直接 cdn 链接。

Answer 1

在 bootstrap 上使用时间选择器。您必须使用 datetimepicker 组件。并使用格式属性只允许捕获小时和分钟

<!DOCTYPE HTML>
<html>
<head>
    <link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="bootstrap-3.3.7/js/jquery-1.11.3.min.js"></script>
    <script src="bootstrap-3.3.7/js/moment.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js"</script>
    <script src="bootstrap-3.3.7/js/transition.js"></script>
    <script src="bootstrap-3.3.7/js/collapse.js"></script>

</head>
<body>
    <div class="input-group bootstrap-timepicker timepicker">
        <input id="timepicker1" type="text" class="form-control input-small">
        <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
    </div>

    <script type="text/javascript">
    $(function () {
        $('#timepicker1').datetimepicker({
             format: 'HH:mm'
        });

    });
    </script>
</body>
<html>

Answer 2

rel="stylesheet" 在 css 标签之一中丢失。就是这个问题。

Bootstrap 时间选择器未出现

Bootstrap timepicker not appearing

timepicker

bootstrap-timepicker