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.

Download