Menu
I am trying to use the datetimepicker from http://eonasdan.github.io/bootstrap-datetimepicker/ and I am getting the error "Uncaught TypeError: $(...).datetimepicker is not a function"
Here are my includes:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> Here is the code
<div class="container"> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker6'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker7'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $(function () { $('#datetimepicker6').datetimepicker(); $('#datetimepicker7').datetimepicker({ useCurrent: false //Important! See issue #1075 }); $("#datetimepicker6").on("dp.change", function (e) { $('#datetimepicker7').data("DateTimePicker").minDate(e.date); }); $("#datetimepicker7").on("dp.change", function (e) { $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); }); }); }); </script> Any help would be greatly appreciated.
439
datepicker is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown.
on if not a function" jQuery error occurs for 2 main reasons: Loading an old version of the jQuery library that doesn't support the on function. Loading a library that overrides the value of the dollar sign $ variable.
You can use Time Picker and Date Picker together as a one component. If you want to do this, you have to use input with . date-time class. You have to use also data-open="DatePickerID" HTML data-* Attribute and .
The problem is that datetimepicker is trying to use its own version of jquery, while the version of jquery used by everything else on the web application was a different version… So the function didn’t exist for the version I was using.
@stefanfrede Yes, I see. I had to manual include bootstrap-datetimepicker to have it to work properly. I forced Browserify to use jQuery 2.1.4 but the isse remains.
You will discover that $.fn.datetimepicker is undefined (because datepicker installed itself onto the nested jquery). The generated webpack bundle will include two different jqueries as well.
The problem is that you have not included bootstrap.min.css. Also, the sequence of imports could be causing issue. Please try rearranging your resources as following:
Below is the right code. Include JS files in following manner:
$(document).ready(function() { $(function() { $('#datetimepicker6').datetimepicker(); $('#datetimepicker7').datetimepicker({ useCurrent: false //Important! See issue #1075 }); $("#datetimepicker6").on("dp.change", function(e) { $('#datetimepicker7').data("DateTimePicker").minDate(e.date); }); $("#datetimepicker7").on("dp.change", function(e) { $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); }); }); });<html> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <body> <div class="container"> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker6'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker7'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </body> </html>The problem is that you have not included bootstrap.min.css. Also, the sequence of imports could be causing issue. Please try rearranging your resources as following:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> DEMO
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
