jQuery TimePicker 24 Hour Format

The “Wickedpicker” is a very simple and light-weight jQuery TimePicker 24 Hour Format that comes with configurable options. The user can pick the time with AM & PM.

The plugin also allows users to pick the specific or current data time in both 12 & 24-hour time format. It also has a clear button which allows users to clear the input field.

Furthermore, the plugin comes with a great list of options that allow you to customize it. You can add multiple inputs time picker fields on the same page.

How to Use Timepicker with 12 Hour Format

By loading the jQuery, Plugin Javascript and CSS file into the document, you can start with the implementation.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- Timepicker Js -->
<script src="dist/wickedpicker.min.js"></script>

<!-- Timepicker CSS -->
<link rel="stylesheet" href="dist/wickedpicker.min.css">

After that, you need to an input type text field element with a unique id, the class, and name that will use to handle picked time. Just like the example below:

<input type="text" id="timepicker-12-hr" name="timepicker-12-hr" class="timepicker-12-hr">

Finally, we will initialize the plugin with the default option by using the wickedpicker function.

<script>
  var twelveHour = $('.timepicker-12-hr').wickedpicker();
  $('.time').text('//JS Console: ' + twelveHour.wickedpicker('time'));
  $('.timepicker-24-hr').wickedpicker({twentyFour: true});
</script>

Advance Configuration Option for TimePicker 24 Hour Format

The following are all available options to customize the working of plugin.

$('.timepicker-12-hr').wickedpicker({
  now: "12:35", //hh:mm 24 hour format only, defaults to current time
  twentyFour: false,  //Display 24 hour format, defaults to false
  upArrow: 'wickedpicker__controls__control-up',  //The up arrow class selector to use, for custom CSS
  downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
  close: 'wickedpicker__close', //The close class selector to use, for custom CSS
  hoverState: 'hover-state', //The hover state class to use, for custom CSS
  title: 'Timepicker', //The Wickedpicker's title,
  showSeconds: false, //Whether or not to show seconds,
  timeSeparator: ' : ', // The string to put in between hours and minutes (and seconds)
  secondsInterval: 1, //Change interval for seconds, defaults to 1,
  minutesInterval: 1, //Change interval for minutes, defaults to 1
  beforeShow: null, //A function to be called before the Wickedpicker is shown
  afterShow: null, //A function to be called after the Wickedpicker is closed/hidden
  show: null, //A function to be called when the Wickedpicker is shown
  clearable: false, //Make the picker's input clearable (has clickable "x")
});

That’s it.