Search code examples
javascriptjqueryhtmldatetimedatetimepicker

How to use JQuery DateTime Picker?

I am a beginner programmer and I'm trying to make a web page that displays a JQuery Inline Date and Time Picker. As I was researching, I found this documentation: DateTimePicker. I followed the steps of first importing the JS and CSS files (after the closing body tag) using these tags:

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>

Following those tags, I called on my <input> from my Home.html file with the id of datetimepicker. Then using that id, I copied the code from the tutorial that creates the Inline DateTime Picker Calendar, like so:

  $('#datetimepicker').datetimepicker({
     inline:true
  });

So my Home.html file looks like this:

<!DOCTYPE html>
<html>
 <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">

   <title>Home</title>
   <!-- Compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">

   <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

   <link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>

 </head>
 <body>
     <h3>Inline DateTimePicker</h3>
     <input type="text" id="datetimepicker"/><input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
 </body>
 <!-- CALLS JQUERY LIBRARY FOR DATE AND TIME PICKER -->
 <!-- this should go after your </body> -->
  <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
  <script src="./jquery.js"></script>
  <script src="./jquery.datetimepicker.js"></script>
  <script>
      $('#datetimepicker').datetimepicker({
        inline:true
      });
  </script>
</html>

However, when I run this code, I get an error that says: 

TypeError: 'undefined' is not a function (evaluating '$('#datetimepicker').datetimepicker({
    inline:true
  })')

This is what is displaying: This is what is displaying

This is what I want to display:

enter image description here

How can I get an Inline calendar to display on my Home.html page?

Solution

  • You need to include jquery-ui.js