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>
Leave a Reply