datetimepicker is not a function jquery

Question

I working with datetimepicker jquery ui, when code below html , datetimepicker is not displaying and when i inspect with firebug console it displayed an error ``

$("#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">

What version of jquery are you using? Also, what's the purpose of the jquery-ui.datepicker.js file? The jquery-ui-1.8.16.custom.min.js should already contain all jQuery widgets, including the datepicker — Mitch A, Dec 30 '11 at 10:08
Maybe [this][1] question/answers can help you. [1]: http://stackoverflow.com/questions/1212696/jquery-ui-datepicker-datepicker-is-not-a-function — Chris, Dec 30 '11 at 10:09
@Dirk jQuery JavaScript Library v1.7.1, and i have removed all scripts except the jquery-ui-1.8.16.custom.min.js , but then i gives and error — Rafee, Dec 30 '11 at 10:36

score 17 · Accepted Answer · answered Dec 30 '11 at 21:16

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

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

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

To use the datetimepicker at the link referenced above, you will want to be certain that your scripts path is correct for the plugin.

How would I use this, it just returns a random string which does not relate to the date as far as I can see. — Jack, Jul 30 '15 at 15:13

score 15 · Answer 2 · answered Apr 29 '14 at 08:45

15

I had the same problem with bootstrap datetimepicker extension. Including moment.js before datetimepicker.js was the solution.

answered Apr 29 '14 at 08:45

Frank Eschenbacher

151
1
2

score 13 · Answer 3 · answered Jun 11 '16 at 03:41

13

For some reason this link solved my problem...I don't know why tho..

<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

answered Jun 11 '16 at 03:41

Maduro

713
5
23
44

I think this should be the accepted answer ! – Quan Truong Jul 20 '23 at 08:40

score 11 · Answer 4 · answered Jun 21 '15 at 01:18

11

It's all about the order of the scripts. Try to reorder them, place jquery.datetimepicker.js to be last of all scripts!

answered Jun 21 '15 at 01:18

dacigard

111
1
2

score 3 · Answer 5 · answered May 23 '17 at 12:59

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>

score 0 · Answer 6 · edited Nov 19 '18 at 07:09

0

 $(document).ready(function(){
    $("#example1").datetimepicker({
      allowMultidate: true,
      multidateSeparator: ','
    });
 });

edited Nov 19 '18 at 07:09

4b0

21,981
30
95
142

answered Nov 19 '18 at 07:08

Amdad Hossain

1

6

Welcome to Stack Overflow! Please try to provide a nice description about how your solution works. See: [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). Thanks. – 4b0 Nov 19 '18 at 07:09

datetimepicker is not a function jquery

6 Answers6

Linked