• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
logo

Tutsplanet

Free Technical and Blogging Resources

  • Home
  • Web Hosting
  • Programming
  • Plugins
  • Write For US
  • News
  • About Us
  • Snippets
You are here: Home / Programming / How to Use jQuery Datepicker with Timepicker

How to Use jQuery Datepicker with Timepicker

Aug 18, 2020 by Editorial Staff Leave a Comment

You may heard about the jQuery Date Picker and probably you’ve used it many times. So in this tutorial we are not talking about a jQuery Date Picker, but a date picker with time  selecting option.

jQuery Datepicker with Time Picker

In order to add time picker you need to first install jQuery UI Datepicker.

We will go through the steps that showing how to install date picker using jQuery UI step by step.

The below code illustrates how a normal jQuery UI datepicker works. This code you can use anywhere in your websites.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default Theme</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
	$( function() {
		$( "#datepicker" ).datepicker();
	} );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
</body>
</html>

You can open the above file in browser to see what actually is jQuery UI date picker.

Now we move to jQuery date time picker.

We will use a library called timepicker, go to the website by clicking here and when you navigate to the download section, you can see the CDN JS and JS Deliver links there to download the files.

But in this example we are not downloading any files to our local computer but we just use CDN.

Requirements

You also need to include jQuery and jQuery UI with datepicker and slider wigits. You should include them in your page in the following order:

jQuery
jQueryUI (with datepicker and slider wigits)
Timepicker

You can see the full source code below for the time picker.

<!doctype html>
<html lang="en">
<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="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" >
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 </body>

<script>
    jQuery(function($) {
        $("#datepicker").datetimepicker();
    });
  </script>
</html>

 


Editorial Staff

Editorial Staff at Tutsplanet is a dedicated team to write various tutorials about subjects like Programming, Technology and Operating Systems.

View all posts by Editorial Staff

Filed Under: Programming Tagged With: jQuery

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar




Quick Links

  • A Simple YouTube Video Downloader Script in PHP
  • The 50 Most Useful jQuery Plugins for Frontend Development
  • Base64 Decode Online
  • Base64 Encode Online

Subscribe

* indicates required

Share

   

Hot topics

  • A Simple YouTube Video Downloader Script in PHP 270 views
  • Replace “\n” with new line characters, using Notepad++ 242 views
  • Add FTP/SFTP in Visual Studio Code 178 views
  • Open a URL in a new tab using JavaScript 141 views
  • Using Third-Party Libraries in Codeigniter 140 views
  • Upload Multiple Images and Store in Database using PHP and MySQL. 130 views
  • Laravel Image Intervention Tutorial With Example 125 views
  • Hierarchical Tree view Category Example in Laravel 112 views
  • Spout, an awesome library for reading and writing in Excel. 102 views
  • Manually Install APK Files In Android Studio Emulator 98 views

Categories

  • Design & Development
  • Drupal
  • Facebook
  • General
  • How To
  • ios
  • Javascript
  • Linux
  • Magento
  • Marketing
  • News
  • PHP
  • Plugins
  • Programming
  • Snippets List
  • Social Media
  • Softwares
  • Themes
  • Tips
  • Wordpress
  • YouTube

Copyright © 2021 · TutsPlanet Gene Theme on Genesis Framework · Powered By BunnyCDN