Customizable Time Picker For jQuery UI Datepicker - Timepicker-Addon

Timepicker-Addon is a jQuery plugin which adds a highly customizable, multi-language time picker to the regular jQuery UI datapicker widget.

Features:

• Tons of configuration options.
• Select times with sliders.
• Or from a dropdown select.
• Custom time format.
• Supports timezones.
• Time range picker is supported as well.

Basic usage:

1. Include the necessary jQuery, jQuery UI and jQuery UI slider on the webpage.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>

2. Include the jQuery Timepicker-Addon plugin's files on the webpage.

<!-- Required -->
<link rel="stylesheet" href="jquery-ui-timepicker-addon.css">
<script src="jquery-ui-timepicker-addon.js"></script>
<!-- Optional -->
<script src="i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>

3. Call the function on an input field to initialize the date & time picker with default options.

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

$('#datepicker').datetimepicker();

4. Sometimes you might only need a time picker.

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

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

5. Customize the Timepicker-Addon plugin by overriding the following options.

$('#datepicker').datetimepicker({
  showButtonPanel: true,
  timeOnly: false,
  timeOnlyShowDate: false,
  showHour: null,
  showMinute: null,
  showSecond: null,
  showMillisec: null,
  showMicrosec: null,
  showTimezone: null,
  showTime: true,
  stepHour: 1,
  stepMinute: 1,
  stepSecond: 1,
  stepMillisec: 1,
  stepMicrosec: 1,
  hour: 0,
  minute: 0,
  second: 0,
  millisec: 0,
  microsec: 0,
  timezone: null,
  hourMin: 0,
  minuteMin: 0,
  secondMin: 0,
  millisecMin: 0,
  microsecMin: 0,
  hourMax: 23,
  minuteMax: 59,
  secondMax: 59,
  millisecMax: 999,
  microsecMax: 999,
  minDateTime: null,
  maxDateTime: null,
  maxTime: null,
  minTime: null,
  onSelect: null,
  hourGrid: 0,
  minuteGrid: 0,
  secondGrid: 0,
  millisecGrid: 0,
  microsecGrid: 0,
  alwaysSetTime: true,
  separator: ' ',
  altFieldTimeOnly: true,
  altTimeFormat: null,
  altSeparator: null,
  altTimeSuffix: null,
  altRedirectFocus: true,
  pickerTimeFormat: null,
  pickerTimeSuffix: null,
  showTimepicker: true,
  timezoneList: null,
  addSliderAccess: false,
  sliderAccessArgs: null,
  controlType: 'slider',
  oneLine: false,
  defaultValue: null,
  parse: 'strict',
  afterInject: null
});

6. Available regional settings:

{
  currentText: 'Now',
  closeText: 'Done',
  amNames: ['AM', 'A'],
  pmNames: ['PM', 'P'],
  timeFormat: 'HH:mm',
  timeSuffix: '',
  timeOnlyTitle: 'Choose Time',
  timeText: 'Time',
  hourText: 'Hour',
  minuteText: 'Minute',
  secondText: 'Second',
  millisecText: 'Millisecond',
  microsecText: 'Microsecond',
  timezoneText: 'Time Zone',
  isRTL: false
}

7. Set & get the date and time:

$('#datepicker').datetimepicker('setDate', (new Date()));
$('#datepicker').datetimepicker('getDate');

8. Format the time manually:

var instance = $('#datepicker').datetimepicker();

// parameters:
// format: string represenation of the time format to use
// time: { hour, minute, second, millisecond, timezone }
// options: regional settings
instance.formatTime('HH:mm z', { hour: 14, minute: 36, timezone: '+2000' }, {})

9. Parse a formatted time:

var instance = $('#datepicker').datetimepicker();

// parameters:
// format: string represenation of the time format to use
// time: { hour, minute, second, millisecond, timezone }
// options: regional settings
instance.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {})

---

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