Javascript 引导日期选择器工作不正常_Javascript_Html_Css_Bootstrap 4

Javascript 引导日期选择器工作不正常

javascript html css bootstrap-4

Javascript 引导日期选择器工作不正常,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我正在尝试让一个日期选择器以一种模式弹出的形式工作。这是家，把手  <nav class="navbar navbar-fixed-top navbar-expand-lg navbar-dark " style="background-color:#ff3b3b;"> <a class="navbar-brand" href="#">Airb

我正在尝试让一个日期选择器以一种模式弹出的形式工作。这是家，把手


<!-- Navbar -->
<nav class="navbar navbar-fixed-top navbar-expand-lg navbar-dark " style="background-color:#ff3b3b;">
  <a class="navbar-brand" href="#">Airbnb</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#myModal" data-toggle = "modal" data-target= "#myModal">Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Room Listings</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Registration</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post">
            <!-- Modal Form -->
        <div class="form-group mb-0">
    <label for="formGroupFirstName"></label>
    <input type="text" class="form-control" id="formGroupFirstName" placeholder="First name">
  </div>
  <div class="form-group mb-0">
    <label for="formGroupLastName"></label>
    <input type="text" class="form-control" id="formGroupLastName" placeholder="Last name">
  </div>
  <div class="form-group mb-0">
    <label for="formGroupEmail"></label>
    <input type="email" class="form-control" id="formGroupEmail" placeholder="Email address">
  </div>
  <div class="form-group mb-0">
    <label for="formGroupPassword"></label>
    <input type="password" class="form-control" id="formGroupPassword" placeholder="Password">
  </div>
<div class="form-group mb-0">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Sign up</button>
      </div>
    </div>
  </div>
</div>

非常感谢您的帮助，我曾经设法让它工作过一次，但它会使我的整个屏幕变灰，模式无法使用。

我想您错过了调用Handlebar编译并将代码放入模板容器的机会

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/static/css/bootstrap.css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="/public/css/custom.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
    <meta charset="utf-8">
    <title>WEB322</title>
</head>
<body>
    <div class="container-fullwidth">
        {{{body}}}
    </div>
    <script src="/static/js/jquery.js" charset="utf-8"></script>
    <script src="/static/js/bootstrap.js" charset="utf-8"></script>
    <script src="/public/js/custom.js"></script> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
   <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
</script>
</body>
</html>

$('#myModal').on('shown.bs.modal', function() {
    $('#myInput').focus()
  })

  $(function() {
    $('#datetimepicker1').datetimepicker();
  });