In this article, we will learn how to add a time picker to the jQueryUI Datepicker using the jQuery Timepicker-Addon image plugin.
Note: Please download the jQuery Timepicker plugin in the working folder and include the required files in the head section of your HTML code.
<link href=”http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css” rel=”stylesheet” type=”text/css”/>
<link href=”jquery-ui-timepicker-addon.css” rel=”stylesheet” type=”text/css”/>
Example 1: The following example demonstrates the instantiation of the jQuery datetimepicker() method of the plugin.
Adding a Timepicker to jQuery UI Datepicker: In the above HTML code, we can add following settings for “timeFormat”, “timezonelist” and for localization. There are many more options that can be used by the programmer depending on the need.
Example 2: The following example demonstrates the slider feature with step time intervals for an hour, minute, and seconds time. Please refer to the output for a better understanding. Once the slider is moved, it jumps in time intervals mentioned in the options settings for the time as shown below.
Note: Please don’t forget to include the following libraries in your HTML code for the slider feature.
Example 3: The following example demonstrates adding a dropdown selector for the datetimepicker().
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.