Simple jQuery Time Picker

In this article, we are going to learn how to create Simple jQuery Time Picker on your web page. We are going to use simple and lightweight jQuery plugin to create this. It consists a 24-Hour or 12-Hour format from your time picker to your text field when the user clicks on. Download the full source code below then try it. Let’s start to code.

How to create it

1. Copy and paste this jQuery library link to your HEAD tag of your web page.
1. <link rel="stylesheet" href="stylesheets/wickedpicker.css">
2. <script src="jquery-1.12.4.min.js"></script>
3. <script type="text/javascript" src="src/wickedpicker.js"></script>
2. Choose your desired text field to insert the time picker plugin and we’re done.
1.     <script type="text/javascript">
2.         $('.timepickerA').wickedpicker({now: '15:30', twentyFour: true, title:
3.                 'Time Picker A', showSeconds: true});
4.     </script>
3. And, this is the default plugin settings that we have.
1. <script>
2. var today = new Date();
3.  
4. var pluginName = "SimpleTimePicker",
5.     defaults = {
6.         now: today.getHours() + ':' + today.getMinutes(),
7.         twentyFour: false,
8.         upArrow: 'SimpleTimePicker__controls__control-up',
9.         downArrow: 'SimpleTimePicker__controls__control-down',
10.         close: 'SimpleTimePicker__close',
11.         hoverState: 'hover-state',
12.         title: 'Simple Time Picker',
13.         showSeconds: false,
14.         secondsInterval: 1,
15.         minutesInterval: 1,
16.         beforeShow: null,
17.         show: null,
18.         clearable: false
19. };
20. </script>
4. Markup for two text field. Copy and paste to your BODY tag of your web page.
1.         <h2>
2.                 Simple jQuery Time Picker
3.         </h2>
4.     <label for="timepickerA">Time A in 24-Hour Format</label>
5.         <br />
6.         <br />
7.     <input type="text" id="timepickerA" name="timepickerA" class="timepickerA">
8.         <br />
9.         <br />
10.     <label for="timepickerB">Time B in 12-Hour Format</label>
11.         <br />
12.         <br />
13.     <input type="text" id="timepickerB" name="timepickerB" class="timepickerB">

That's it, kindly click the "Download Code" button below for the full source code. And try it to customize your Time Picker. Enjoy coding.

Output

24-Hour Format Time Picker 12-Hour Format Time Picker Hope that this simple yet useful article that I created may help you to your future projects. Share us your thoughts and comments below. Thank you so much for dropping by and reading this article post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.