Google Calendar Like jQuery Time Picker Plugin - Timepicker.js

Yet another jQuery time picker plugin which creates a simple highly customizable, Google Calendar inspired timer picker for easier time selection.

Features:

• Lightweight and easy to customize.
• Can be bound to any DOM element.
• Can render itself as a select element
• Custom time range, step and format.
• Supports duration selection.
• Compatible with jQuery Datepair plugin.
• Keyboard navigation.
• Lots of customization options and API.
• Cross browser and mobile friendly.

Basic usage:

1. Include jquery.timepicker.css inside your head tag and jquery.timepicker.js after jQuery library but before the closing body tag.

<link href="jquery.timepicker.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.timepicker.js"></script>

2. Create a text input field for the time picker.

<input id="basic" type="text">

3. Initialize the time picker and we're ready to go.

$('#basic').timepicker();

4. All configuration options with default values.

$('#basic').timepicker({

  // where the timepicker is appended
  appendTo: 'body',

  // additional CSS class
  className: null,

  // close the time picker on scroll
  closeOnWindowScroll: false,

  // disable text input
  disableTextInput: false,

  // disable time ranges
  disableTimeRanges: [],

  // disable onscreen keyboard for touch devices
  disableTouchKeyboard: false,

  // the time against which showDuration will compute relative times. 
  // if this is a function, its result will be used.
  durationTime: null,

  // force update the time to step settings as soon as it loses focus.
  forceRoundTime: false,

  // min / max time
  maxTime: null,
  minTime: null,

  // Adds a "None" option that results in an empty input value
  noneOption: false,

  // l (left), r (right), t (top), and b (bottom)
  orientation: 'l',

  // Function used to compute rounded times. 
  roundingFunction: function(seconds, settings) {
    if (seconds === null) {
      return null;
    } else {
      var offset = seconds % (settings.step*60); // step is in minutes

      if (offset >= settings.step*30) {
        // if offset is larger than a half step, round up
        seconds += (settings.step*60) - offset;
      } else {
        // round down
        seconds -= offset;
      }

      return seconds;
    }
  },

  // if no time value is selected, set the dropdown scroll position to show the time provided, e.g. "09:00". 
  // a time string, Date object, or integer (seconds past midnight) is acceptible, as well as the string 'now'.
  scrollDefault: null,

  // update the input with the currently highlighted time value when the timepicker loses focus.
  selectOnBlur: false,

  // show "24:00" as an option when using 24-hour time format.
  show2400: false,

  // show the relative time for each item in the dropdown
  showDuration: false,

  // display a timepicker dropdown when the input fires a particular event. 
  // set to null or an empty array to disable automatic display. 
  // setting should be an array of strings. 
  showOn: ['click', 'focus'],

  // display a timepicker dropdown when the input gains focus.
  showOnFocus: true,

  // The amount of time, in minutes, between each item in the time picker.
  step: 30,

  // When scrolling on the edge of the time picker, it prevent parent containers () to scroll.
  stopScrollPropagation: false,

  // custom time format
  // uses PHP's date() formatting syntax.
  timeFormat: 'g:ia',

  // highlight the nearest corresponding time option as a value is typed into the form input.
  typeaheadHighlight: true,

  // convert the input to an HTML <SELECT> control. 
  useSelect: false

});

5. Public methods.

// Get the time as an integer, expressed as seconds from 12am.
$('#el').timepicker('getSecondsFromMidnight');

// Get the time using a Javascript Date object, relative to a Date object (default: Jan 1, 1970).
$('#el').timepicker('getTime');
$('#el').timepicker('getTime', new Date());

// Hide the time picker
$('#el').timepicker('hide');

// Remove the time picker
$('#el').timepicker('remove');

// Set the time using a Javascript Date object.
$('#el').timepicker('setTime', new Date());

// Display the time picker.
$('#el').timepicker('show');

6. Events.

// fire any time the input value is updated
$('#el').on('change', function() {
  // do something
});

// called after a valid time value is entered or selected. 
// see timeFormatError and timeRangeError for error events.
// fires before change event.
$('#el').on('changeTime', function() {
  // do something
});

// called after the timepicker is closed.
$('#el').on('hideTimepicker', function() {
  // do something
});

// called after a time value is selected from the timepicker list. 
// fires before change event.
$('#el').on('selectTime', function() {
  // do something
});

// called after the timepicker is shown.
$('#el').on('showTimepicker', function() {
  // do something
});

// called if an unparseable time string is manually entered into the timepicker input. 
// fires before change event.
$('#el').on('timeFormatError', function() {
  // do something
});


// called if a maxTime, minTime, or disableTimeRanges is set and an invalid time is manually entered into the timepicker input.
// fires before change event.
$('#el').on('timeRangeErrorr', function() {
  // do something
});

---

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