日期选择器出现问题：TypeError：date_input.datepicker不是一个函数

时间：2018-10-11 23:18:31

标签： jquery datepicker bootstrap-4

我已经知道多个版本的jQuery可能会有一些问题。

问题在于我已经尝试删除所有内容，并且日期选择器不起作用。

jQuery的另一部分已经用于datatables插件。

可在此处找到页面示例：

Link to jsfiddle.net

我的完整页面代码是：

<!DOCTYPE html>

<html>
<header>


<header><meta charset="UTF-8">


    <style type="text/css">
        body{ font: 11px sans-serif; text-align: center; }
    </style>
    <div class= "mx-auto">
    <h4>Hi, <b>miguelpoppe</b>. Welcome to our site.</h4>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">GesCont</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item"><a href="welcome.php">Home</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Clientes</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="clientes.php"id="navbarDropdown" role="button">Criar ou Consultar Clientes</a><div class="dropdown-divider"></div></div></li><li class="nav-item"><a href="imobiliario.php">Imobiliario</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contractos</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="criar_contrato.php"id="navbarDropdown" role="button">Criar / Consultar Contratos</a><div class="dropdown-divider"></div></div></li></ul></nav>
<!DOCTYPE html>
<html>
<head>
    <style>


li a, .dropbtn {
    display: inline-block;
    color: grey;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    text-transform: uppercase;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: lightgrey;
    text-transform: uppercase;
    color: white;



}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
    <title></title>
</head>
<header>


</header>
<body>

</body>
</html>



</div>


  </header>
<html lang="en">

    <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>

<!-- codigo para jquery - nao tirar -->
<script type="text/javascript" language="javascript" src="./DataTables/jquery-3.3.1.js" ></script>


<!-- codigo para funcionalidade da tabela -->

<script type="text/javascript" language="javascript" src="./DataTables/jquery.dataTables.min.js" charset="UTF-8"></script>

<script type="text/javascript" src="./DataTables/dataTables.bootstrap4.min.js" charset="UTF-8"></script>

<!--  codigo para estilo css -->

<link rel="stylesheet" type="text/css" href="./DataTables/dataTables.bootstrap4.css">

<link rel="stylesheet" type="text/css" href="style.css">

<!--codigo para bootstrap pagina -->

<!-- Latest compiled and minified CSS -->


<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>




<!-- extras-->

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    </head>

</html>





</header>


    <head>
<meta charset="UTF-8">
    <title>Adicionar Novo Ingrediente</title>





    <script>

    $.noConflict();
    jQuery( document ).ready(function( $ ) 
        {

            $(document).ready(function() {
        $('#example').DataTable( {
            "paging":   false,
            "ordering": "400 ",
            "info":     "400",
            "scrollY": "400",
        } );
    } );
    } );
    </script>


    </head>

    <body>
<div  class= "container-fluid ">



    <!-- formulario de ingredientes -->


              <div class="col-lg-4 m-2 text-dark ">
              <div class="container-fluid "><h3>Criar Contrato</h3></div>
              <!-- Special version of Bootstrap that only affects content wrapped in .bootstrap-iso -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 

<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />

<!-- Inline CSS based on choices in "Settings" tab -->
<style>.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso form{font-family: Arial, Helvetica, sans-serif; color: black}.bootstrap-iso form button, .bootstrap-iso form button:hover{color: white !important;} .asteriskField{color: red;}</style>

<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div class="bootstrap-iso">
 <div class="container">
  <div class="row">
   <div class="col-lg-4 col-sm-6 col-xs-12">
    <form method="post">
     <div class="form-group ">
      <label class="control-label " for="cliente">
       Cliente
      </label>
      <select class="select form-control" id="cliente" name="cliente">
       <option value="First Choice">
        First Choice
       </option>
      </select>
     </div>
     <div class="form-group ">
      <label class="control-label " for="fracao">
       Frac&ccedil;&atilde;o
      </label>
      <select class="select form-control" id="fracao" name="fracao">
       <option value="First Choice">
        First Choice
       </option>
      </select>
     </div>
     <div class="form-group ">
      <label class="control-label " for="date">
       Inicio
      </label>
      <div class="input-group">
       <div class="input-group-addon">
        <i class="fa fa-calendar">
        </i>
       </div>
       <input class="form-control" id="date" name="date" placeholder="AAAA-MM-DD" type="text"/>
      </div>
     </div>
     <div class="form-group ">
      <label class="control-label " for="fim">
       Termino
      </label>
      <div class="input-group">
       <div class="input-group-addon">
        <i class="fa fa-calendar">
        </i>
       </div>
       <input class="form-control" id="fim" name="fim" placeholder="AAAA/MM/DD" type="text"/>
      </div>
     </div>
     <div class="form-group ">
      <label class="control-label " for="senhorio">
       Pre-Aviso Senhorio
      </label>
      <div class="input-group">
       <div class="input-group-addon">
        <i class="fa fa-calendar">
        </i>
       </div>
       <input class="form-control" id="senhorio" name="senhorio" placeholder="AAAA-MM-DD" type="text"/>
      </div>
     </div>
     <div class="form-group ">
      <label class="control-label " for="inquilino">
       Pre-Aviso Inquilino
      </label>
      <div class="input-group">
       <div class="input-group-addon">
        <i class="fa fa-calendar">
        </i>
       </div>
       <input class="form-control" id="inquilino" name="inquilino" placeholder="AAAA-MM-DD" type="text"/>
      </div>
     </div>
     <div class="form-group ">
      <label class="control-label " for="break">
       Break
      </label>
      <div class="input-group">
       <div class="input-group-addon">
        <i class="fa fa-calendar">
        </i>
       </div>
       <input class="form-control" id="break" name="break" placeholder="AAAA-MM-DD" type="text"/>
      </div>
     </div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>


<!-- Extra JavaScript/CSS added manually in "Settings" tab -->
<!-- Include jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

<script>
    $(document).ready(function(){
        var date_input=$('input[name="date"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
            format: 'yyyy/mm/dd',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })
</script>
<script>
    $(document).ready(function(){
        var date_input=$('input[name="fim"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
            format: 'yyyy/mm/dd',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })
</script>
<script>
    $(document).ready(function(){
        var date_input=$('input[name="senhorio"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
            format: 'yyyy/mm/dd',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })
</script>

<script>
    $(document).ready(function(){
        var date_input=$('input[name="inquilino"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
            format: 'yyyy/mm/dd',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })
</script>

<script>
    $(document).ready(function(){
        var date_input=$('input[name="break"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
            format: 'yyyy/mm/dd',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })
</script></div>


               <div class="col-lg-7 text-dark ">
              <div class="container-fluid "><h3>Lista Contratos</h3></div>
              <div style='border-bottom:1px solid #ccc;'></div>
            </br>
<!--lista de clientes-->

 <table id="example" class="table display">
                        <thead><tr>
                        <th>Nome Cliente</th>
                        <th>Inicio</th>
                        <th>Duração Restante (meses)</th>
                        <th>Dias Até Pre Aviso Senhorio</th>
                        <th>Dias Até Pre Aviso Inquilino</th>


                    </tr></thead>

                    <tbody>
                <tr><td>drwerwer</td><td>234234234</td><td>234234234</td><td>dfsdfsdf</td><td>joao.castropereira@gmail.com</td></tr><tr><td>joao castro pereira</td><td>214450325</td><td>914657785</td><td>joao castro pereira</td><td></td></tr><tr><td>Teste</td><td>2346823</td><td>2342342</td><td>josdjiwe</td><td>joao.castropereira@gmail.com</td></tr>

</tbody>
</table>


<!-- Extra JavaScript/CSS added manually in "Settings" tab -->
<!-- Include jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

<script>
    $(document).ready(function(){
        var date_input=$('input[name="date"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })
</script>




    </body>
<footer>
    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <title>Adicionar Novo Ingrediente</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <style type="text/css">
        body{ font: 14px sans-serif; }
        .wrapper{ width: 350px; padding: 20px; }

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </style>
    <link rel="stylesheet" type="text/css" href="style.css">



</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">

     </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">

    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">

    </script>   

</body>

<footer>
    <div class= "footer mx-auto" >
      <p><a href="logout.php" class="fixed-bottom">Sign Out of Your Account</a></p>
    </div>
</footer>
</html>



</footer>
</html>

2 个答案:

答案 0 :(得分：0)

我复制了小提琴，并将其放在可以直接复制和粘贴的格式中。

注意：

  • 将脚本放在body标签的末尾
  • 按先加载先决条件的顺序排列脚本
  • 仅包含一个jquery，bootstrap js。不要混用多个版本。

尝试该代码段； 

<html>

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />

  <style>
    .bootstrap-iso .formden_header h2,
    .bootstrap-iso .formden_header p,
    .bootstrap-iso form {
      font-family: Arial, Helvetica, sans-serif;
      color: black
    }
    
    .bootstrap-iso form button,
    .bootstrap-iso form button:hover {
      color: white !important;
    }
    
    .asteriskField {
      color: red;
    }
  </style>
</head>

<body>
  <!-- HTML Form (wrapped in a .bootstrap-iso div) -->
  <div class="bootstrap-iso">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-sm-6 col-xs-12">
          <form method="post">
            <div class="form-group ">
              <label class="control-label " for="cliente">
       Cliente
      </label>
              <select class="select form-control" id="cliente" name="cliente">
                <option value="First Choice">
                  First Choice
                </option>
              </select>
            </div>
            <div class="form-group ">
              <label class="control-label " for="fracao">
       Frac&ccedil;&atilde;o
      </label>
              <select class="select form-control" id="fracao" name="fracao">
                <option value="First Choice">
                  First Choice
                </option>
              </select>
            </div>
            <div class="form-group ">
              <label class="control-label " for="date">
       Inicio
      </label>
              <div class="input-group">
                <div class="input-group-addon">
                  <i class="fa fa-calendar">
        </i>
                </div>
                <input class="form-control" id="date" name="date" placeholder="AAAA-MM-DD" type="text" />
              </div>
            </div>
            <div class="form-group ">
              <label class="control-label " for="fim">
       Termino
      </label>
              <div class="input-group">
                <div class="input-group-addon">
                  <i class="fa fa-calendar">
        </i>
                </div>
                <input class="form-control" id="fim" name="fim" placeholder="AAAA/MM/DD" type="text" />
              </div>
            </div>
            <div class="form-group ">
              <label class="control-label " for="senhorio">
       Pre-Aviso Senhorio
      </label>
              <div class="input-group">
                <div class="input-group-addon">
                  <i class="fa fa-calendar">
        </i>
                </div>
                <input class="form-control" id="senhorio" name="senhorio" placeholder="AAAA-MM-DD" type="text" />
              </div>
            </div>
            <div class="form-group ">
              <label class="control-label " for="inquilino">
       Pre-Aviso Inquilino
      </label>
              <div class="input-group">
                <div class="input-group-addon">
                  <i class="fa fa-calendar">
        </i>
                </div>
                <input class="form-control" id="inquilino" name="inquilino" placeholder="AAAA-MM-DD" type="text" />
              </div>
            </div>
            <div class="form-group ">
              <label class="control-label " for="break">
       Break
      </label>
              <div class="input-group">
                <div class="input-group-addon">
                  <i class="fa fa-calendar">
        </i>
                </div>
                <input class="form-control" id="break" name="break" placeholder="AAAA-MM-DD" type="text" />
              </div>
            </div>
            <div class="form-group">
              <div>
                <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

  <script>
    $(document).ready(function() {
      var date_input = $('input[name="date"]'); //our date input has the name "date"
      var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
      date_input.datepicker({
        format: 'yyyy/mm/dd',
        container: container,
        todayHighlight: true,
        autoclose: true,
      })
    })

    $(document).ready(function() {
      var date_input = $('input[name="fim"]'); //our date input has the name "date"
      var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
      date_input.datepicker({
        format: 'yyyy/mm/dd',
        container: container,
        todayHighlight: true,
        autoclose: true,
      })
    })

    $(document).ready(function() {
      var date_input = $('input[name="senhorio"]'); //our date input has the name "date"
      var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
      date_input.datepicker({
        format: 'yyyy/mm/dd',
        container: container,
        todayHighlight: true,
        autoclose: true,
      })
    })

    $(document).ready(function() {
      var date_input = $('input[name="inquilino"]'); //our date input has the name "date"
      var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
      date_input.datepicker({
        format: 'yyyy/mm/dd',
        container: container,
        todayHighlight: true,
        autoclose: true,
      })
    });



    $(document).ready(function() {
      var date_input = $('input[name="break"]'); //our date input has the name "date"
      var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
      date_input.datepicker({
        format: 'yyyy/mm/dd',
        container: container,
        todayHighlight: true,
        autoclose: true,
      })
    });
  </script>
</body>

</html>

答案 1 :(得分：0)

同时，我“刚刚发现”在页脚中还有其他与日期选择器冲突的东西。

由于我没有将这四个文件放在jsfiddle中，所以日期选择器在那里工作了...

解决了！

感谢大家的帮助！

相关问题
最新问题