Uncaught TypeError: jQuery(...).datetimepicker is not a function-CodePudding

I have a code to generate a normal date time picker, but it is throwing me this error Uncaught TypeError: jQuery(...).datetimepicker is not a function

Can anyone help me, i guess it is because of arrangment of links and bootstrap , but i don't have a clear picture of it.

below is my code

<html>
    <head>
     <link rel="stylesheet" href="jquery.datetimepicker.css">
    <script src="jquery-1.8.2.min.js"></script>
    <!-- <script src="jquery-ui.js"></script> -->
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script src="jquery.datetimepicker.js"></script>
    <script src="jquery.validate.min.js"></script>
    <link rel="stylesheet" href="fonts/icomoon/style.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">


    <script>
        $(document).ready(function() {
            jQuery('#datevalue').datetimepicker();
            jQuery('#completed').datetimepicker();
        });
    </script>
    </head>

    <body>
        <form action="#" method="post">
            <div id="AlignMainDiv">
                <div >
                    <label for="date">Date</label>
                    <input type="text"  id="datevalue">
                  </div>
                  <div >
                    <label for="username">Completed Date and Time</label>
                    <input type="text"  id="completed">
                  </div>
            </div>
        </form>
    </body>
</html>

CodePudding user response：

Press F11, open the Chrome debug, go to Network > JS tab and check if any of the included js libraries return a 404 status. Maybe you misspelled a script name or URL path.

You can also try to include the libraries directly from CDNs:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $('#datevalue').datetimepicker();
    $('#completed').datetimepicker();
  } );
  </script>
</head>

CodePudding user response：

I dont know whether your datetimepicker library is loading or not.

You can use following CDN.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>

Following code will load todays date and will show datepicker on input click

<script>

    $(document).on("click", "#datevalue" , function() {

        $(this).datetimepicker({
            timepicker:false, format:"d-m-Y","setDate": new Date(),
        }).focus();

    });

</script>