How to use JQuery DateTime Picker?

javascript jquery html datetime datetimepicker

14,894

Solution 1

You need to include jquery-ui.js

Solution 2

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>

Solution 3

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 .

14,894

Author by

user3692825

Updated on June 04, 2022

Comments

user3692825 almost 2 years

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 I want to display:

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

Recents

Why Is PNG file with Drop Shadow in Flutter Web App Grainy?

How to troubleshoot crashes detected by Google Play Store for Flutter app

Cupertino DateTime picker interfering with scroll behaviour

Why does awk -F work for most letters, but not for the letter "t"?

Flutter change focus color and icon color but not works

How to print and connect to printer using flutter desktop via usb?

Critical issues have been reported with the following SDK versions: com.google.android.gms:play-services-safetynet:17.0.0

Flutter Dart - get localized country name from country code

navigatorState is null when using pushNamed Navigation onGenerateRoutes of GetMaterialPage

Android Sdk manager not found- Flutter doctor error

Flutter Laravel Push Notification without using any third party like(firebase,onesignal..etc)

How to change the color of ElevatedButton when entering text in TextField

How to remove time value in datetime-local input type?

Bootstrap datetimepicker don't work with readonly or disabled

while clicking local push notification how to navigate and reload a page in flutter

JQuery data table with multiple header rows and fixed column

how to add style in table which is dynamically created

Merge each row above parent with parent/children?

CSS3 Transitions: replace them entirely on mobile?

My jQuery is not working with IE11

Displaying City name in a div using geolocation

Moving div above another using Javascript/JQuery?