1

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?

VincenzoC
  • 30,117
  • 12
  • 90
  • 112
makzyt
  • 73
  • 1
  • 2
  • 5
  • I will just mention that the button right to the input is not working due the error. – makzyt Mar 23 '18 at 16:17
  • 3
    Do you have in your actual code wrapped around `div.container`? – Alexander Staroselsky Mar 23 '18 at 16:20
  • Yes I forgot that. Nothing changed, unfortunately. – makzyt Mar 23 '18 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 Mar 23 '18 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 – Alexander Staroselsky Mar 23 '18 at 16:31
  • @KevinB yes that's all, there are external CSS and JS files included in , all newest versions – makzyt Mar 23 '18 at 16:41
  • @AlexanderStaroselsky jQuery works when I use it in the console, I think the problem might be with moment.js and bootstrap-datetimepicker.js (renamed Tempus Dominus), because there were problems with these two in other threads. But I don't know what it is this time, it doesn't work even in this simple example. – makzyt Mar 23 '18 at 16:45
  • I can't get it to work using CDN resources for the basic example in something like [JSFiddle](https://jsfiddle.net/ue9w1ryj/5/). Something may simply be off with this library or at least this version. – Alexander Staroselsky Mar 23 '18 at 16:49

1 Answers1

4

Check sequence of js import

tempus dominus with bootstrap 4:

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

Rahul Mahadik
  • 11,668
  • 6
  • 41
  • 54