Easy User-friendly Time Picker Plugin - jQuery timebox

timebox is a simple, lightweight, cross-browser, mobile-friendly jQuery time picker plugin which enables the users to select hours, minutes and AM/PM from a popup box for easier time selection.

How to use it:

1. Link to jQuery JavaScript library and the jQuery timebox plugin's JavaScript & CSS files.

<link rel="stylesheet" href="timebox.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="timebox.js"></script>

2. Create a time input element on the web page.

<div data-time="1:00pm" 
     class="timebox">
     Time: 1:00pm
</div>

3. Initialize the jQuery timebox plugin.

$(".timebox").ezTimebox({

  // the element ID that is used to get/set time data
  "time_element" : this,

  // this provides the starting time in h:ma format (3:00pm)
  "starting_time" : $.trim(this.attr("data-time")),

});

4. Display the time picker popup on click.

this.off("click").on("click", function(){
  $(this).ezTimebox("show");
});

5. More configuration options.

$(".timebox").ezTimebox({

  // the element ID that is used to get/set time data
  // required
  "time_element" : this,

  // this provides the starting time in h:ma format (3:00pm)
  // required
  "starting_time" : $.trim(this.attr("data-time")),

  // false = dialog style 
  // true = fullscreen style
  // optional
  responsive: false,
  
  // any integer less than 60 will
  // optional
  scale: 15

});

6. Styling options.

• primary_color_bg (optional - window color)
• secondary_color_bg (optional - active button elements backcolor)
• secondary_color_fg (optional - active button elements forecolor)
• tertiary_color_bg (optional - button elements backcolor)
• tertiary_color_fg (optional - button elements forecolor)
• save_color_bg (optional -save button backcolor)
• save_color_fg (optional - save button forecolor)

7. The plugin provides a callback function which will be triggered when the time has changed.

$(".timebox").ezTimebox({

  // the element ID that is used to get/set time data
  // required
  "time_element" : this,

  // this provides the starting time in h:ma format (3:00pm)
  // required
  "starting_time" : $.trim(this.attr("data-time")),

  onSave : function(v){
    $(this).text("Time: " + v);
  }

});

---

This awesome jQuery plugin is developed by theashcraig. For more Advanced Usages, please check the demo page or visit the official website.