In this article I will explain with an example, how to implement jQuery TimePicker in HTML.
Download jQuery TimePicker Plugin
You will need to download the plugin files from the following location.
The complete documentation is available in the following link.
HTML Markup
The HTML Markup consists of:
TextBox – For displaying TimePicker.
Button – For displaying selected Time in JavaScript Alert Message Box.
<input id="txtTime" type="text" />
<input id="btnSubmit" type="button" value="Submit" />
jQuery TimePicker Plugin implementation
Inside the HTML Markup, first the following CSS file is inherited.
1. jquery.timepicker.min.css
And then, the following JS scripts are inherited.
1. jquery.min.js
2. jquery.timepicker.min.js
Inside the jQuery document ready event handler, the HTML TextBox has been applied with the jQuery TimePicker plugin and the Button has been assigned with Click event handler.
When a Time is selected and the Submit button is clicked, the value of the selected Time is displayed using JavaScript Alert Message Box.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtTime").timepicker();
$("#btnSubmit").on("click", function () {
alert("Selected Time: " + $("#txtTime").val());
});
});
</script>
Screenshot
![Implement jQuery TimePicker in HTML]()
Demo
Downloads
