Datetimepicker is not a jquery function

Question

I am working with datetimepicker jquery ui, when the code is below html, datetimepicker is not displayed, and when I check with firebug console , it gives an error message ``

 $("#example1").datetimepicker is not a function [Break On This Error] $("#example1").datetimepicker(); 

and below is the code

 <link href="css/styles.css" rel="stylesheet" type="text/css"> <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"> <style> .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } .ui-timepicker-div dl { text-align: left; } .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; } .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; } .ui-timepicker-div td { font-size: 90%; } .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } </style> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery/ui/jquery.ui.datepicker.js"></script> <script type="text/javascript" src="scripts/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="scripts/jquery/ui/jquery-ui-timepicker-addon.js"></script> <script type="text/javascript" src="scripts/jquery/ui/jquery-ui-sliderAccess.js"></script> <script> $(document).ready(function(){ $("#example1").datetimepicker(); }); </script> <script> </script> <input type="text" id="example1" class="hasDatePicker"> 

Answer 1

Keep in mind that the jQuery UI datepicker is not initialized with datetimepicker (), there seems to be a plugin / addon here: http://trentrichardson.com/examples/timepicker/ .

However, only with jquery-ui it is actually initialized as $("#example").datepicker() . See the jQuery demo site here: http://jqueryui.com/demos/datepicker/

  $(document).ready(function(){ $("#example1").datepicker(); }); 

To use the datetimepicker from the link mentioned above, you need to be sure that your plugin has the correct path for the scripts.

Answer 2

I had the same problem with the datetimepicker extension. Inclusion of .js moment before datetimepicker.js solution.

Answer 3

For some reason, this link solved my problem ... I don’t know why exactly ...

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 

Then this:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 

NOTE. I am using Bootstrap 3 and jQuery 1.11.3

Answer 4

It is all about script ordering. Try reordering them, put jquery.datetimepicker.js as the last of all the scripts!

Answer 5

 Place your scripts in this order: <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>