CODEWITHSUNDEEP
javascriptjqueryhtmldatetimedatetimepicker
user3692825
user3692825

Reputation: 126

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?

Upvotes: 3

Views: 20961

Answers (4)

vinayak hegde
vinayak hegde

Reputation: 2222

I had the same sort of issue , If download the the source code from the XDSoft site

there is build folder , try using jquery.datetimepicker.full.js file from build folder .

Upvotes: 1

tallpaul
tallpaul

Reputation: 1513

Put 

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

between your <head></head> tags and remove 

<script src="./jquery.js"></script>

Upvotes: 1

shaz
shaz

Reputation: 2387

You need to include jquery-ui.js

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Do not confuse between jQuery versions. You first referenced jQuery here:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

And then you are doing it here:

<script src="./jquery.js"></script>

Please remove one. As the newer jQuery will be active and it doesn't have the plugin registered.

Upvotes: 0

Related Questions