How to Implement jQuery Datepicker with Timepicker

Are you looking to add a timepicker to the existing jQuery UI Datepicker? By adding a timepicker, one can select the time along with the date. In this article, I show you a simple way to implement jQuery Datepicker with a timepicker.

We are going through step by step on adding a timepicker to the jQuery UI Datepicker. If someone doesn’t want to follow each step they can directly copy the final code from the last section of this article.

When we finish with our integration, the final datetimepicker will look as follows.

datetimepicker

Let’s Start with jQuery UI Datepicker

Our goal is adding a timepicker to the jQuery UI Datepicker. jQuery Datepicker provides us an inline calendar to select the date. Let’s add this datepicker by using the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery Datetimepicker</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
    jQuery(function($) {
        $("#datepicker").datepicker();
    });
  </script>
</body>
</html>

Go to the browser and run the above file, you should see the Datepicker on your page.

Implement jQuery Datepicker with Time Picker

In order to add a time picker, I will use Timepicker plugin which is easy to integrate with jQuery UI Datepicker.

Once you visit the website scroll down to the download section and click on the CDNJS link. From this link, copy the plugin’s JS and CSS files. Here is the CDNJS link which you will get from their website https://cdnjs.com/libraries/jquery-ui-timepicker-addon.

cdnjs-link

On the CDNJS website, you may see the several URLs for the timepicker addon. Copy the below 2 links of JS and CSS.

cdnjs

Just for making it easy, below are those links. Use these links in the next step of the tutorial.

https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js

Once you get the required JS and CSS, you are ready to add a timepicker. What you need to do is include the copied files in HTML and replace the datepicker() function with datetimepicker().

Our final code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery Datetimepicker</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" />
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
    <script>
    jQuery(function($) {
        $("#datepicker").datetimepicker();
    });
  </script>
</body>
</html>

That’s it! Now if you reload the page, you should see both datepicker and timepicker on your page. Please go ahead and give a try for it. I would like to hear your thoughts in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

3 thoughts on “How to Implement jQuery Datepicker with Timepicker

Leave a Reply

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