admin管理员组

文章数量:1401838

I know this question was asked many times before (because I looked here for solution), so excuse me for adding more trash. I'm using this datetime picker and in the console I get error:

TypeError: $(...).datetimepicker is not a function

Whole HTML document:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="./css/fontawesome.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/moment.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2"/>
                    <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        </script>
    </div>
</div>
</body>
</html>

I don't think it's the order of loading scripts (as mentioned everywhere else) and I have all the dependencies. What could be the cause of error?

I know this question was asked many times before (because I looked here for solution), so excuse me for adding more trash. I'm using this datetime picker and in the console I get error:

TypeError: $(...).datetimepicker is not a function

Whole HTML document:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="./css/fontawesome.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/moment.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2"/>
                    <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        </script>
    </div>
</div>
</body>
</html>

I don't think it's the order of loading scripts (as mentioned everywhere else) and I have all the dependencies. What could be the cause of error?

  • javascript
  • html
  • css
  • datetimepicker
  • tempus-dominus-datetimepicker
Share Improve this question edited Mar 25, 2018 at 21:05 VincenzoC 31.5k12 gold badges100 silver badges121 bronze badges asked Mar 23, 2018 at 16:15 makzytmakzyt 731 gold badge2 silver badges5 bronze badges 8
  • I will just mention that the button right to the input is not working due the error. – makzyt Commented Mar 23, 2018 at 16:17
  • 3 Do you have <body> in your actual code wrapped around div.container? – Alexander Staroselsky Commented Mar 23, 2018 at 16:20
  • Yes I forgot that. Nothing changed, unfortunately. – makzyt Commented Mar 23, 2018 at 16:24
  • "Whole HTML document:" are you sure it's the whole HTML document? there's no other html? no other js? Your problem doesn't appear to be related to the code you have provided. – Kevin B Commented Mar 23, 2018 at 16:31
  • You may need to confirm jQuery and other scripts are even loading. Try inside the ready function to just even console.log() something simple. Maybe the paths need to be adjusted to the <script> resources. – Alexander Staroselsky Commented Mar 23, 2018 at 16:31
 |  Show 3 more ments

1 Answer 1

Reset to default 4

Check sequence of js import

tempus dominus with bootstrap 4:

$(function() {
   $('#datetimepicker1').datetimepicker();
 });
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit./tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>
<link href="https://rawgit./tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
          <span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <span class="fa fa-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

tether.min.js also required for tempusdominus-bootstrap-4.js

tempus dominus with bootstrap 3 (Run in full page mode or set css)

$(function() {
   $('#datetimepicker1').datetimepicker();
 });
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://rawgit./tempusdominus/bootstrap-3/master/build/js/tempusdominus-bootstrap-3.js"></script>
<link href="https://rawgit./tempusdominus/bootstrap-3/master/build/css/tempusdominus-bootstrap-3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
          <span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Hope this will helps you

本文标签： javascriptTypeError ()datetimepicker is not a functionStack Overflow

版权声明：本文标题：javascript - TypeError: $(...).datetimepicker is not a function - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744237854a2596641.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。