title: How to use JQuery DateTime Picker?
body: <p>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: <a href="http://xdsoft.net/jqplugins/datetimepicker/" rel="nofollow noreferrer">DateTimePicker</a>. I followed the steps of first importing the JS and CSS files (after the closing body tag) using these tags:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ &gt;
  &lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.datetimepicker.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Following those tags, I called on my <code>&lt;input&gt;</code> from my <strong>Home.html</strong> file with the id of <code>datetimepicker</code>. Then using that id, I copied the code from the tutorial that creates the Inline DateTime Picker Calendar, like so:</p>
  
  <pre><code>  $('#datetimepicker').datetimepicker({
       inline:true
    });
  </code></pre>
  
  <p>So my <strong>Home.html</strong> file looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
     &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
     &lt;meta charset="utf-8"&gt;
  
     &lt;title&gt;Home&lt;/title&gt;
     &lt;!-- Compiled and minified CSS --&gt;
     &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css"&gt;
  
     &lt;!-- Compiled and minified JavaScript --&gt;
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"&gt;&lt;/script&gt;
  
     &lt;link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/&gt;
     &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  
   &lt;/head&gt;
   &lt;body&gt;
       &lt;h3&gt;Inline DateTimePicker&lt;/h3&gt;
       &lt;input type="text" id="datetimepicker"/&gt;&lt;input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/&gt;&lt;br&gt;&lt;br&gt;
   &lt;/body&gt;
   &lt;!-- CALLS JQUERY LIBRARY FOR DATE AND TIME PICKER --&gt;
   &lt;!-- this should go after your &lt;/body&gt; --&gt;
    &lt;link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ &gt;
    &lt;script src="./jquery.js"&gt;&lt;/script&gt;
    &lt;script src="./jquery.datetimepicker.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $('#datetimepicker').datetimepicker({
          inline:true
        });
    &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, when I run this code, I get an error that says: </p>
  
  <pre><code>TypeError: 'undefined' is not a function (evaluating '$('#datetimepicker').datetimepicker({
      inline:true
    })')
  </code></pre>
  
  <p>This is what is displaying:
  <a href="https://i.stack.imgur.com/isEHC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/isEHC.png" alt="This is what is displaying"></a></p>
  
  <p>This is what I want to display:</p>
  
  <p><a href="https://i.stack.imgur.com/KDsf3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KDsf3.png" alt="enter image description here"></a></p>
  
  <p>How can I get an Inline calendar to display on my <strong>Home.html</strong> page?</p>