Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


A lightweight & configurable timepicker directive.

uib-timepicker settings

  • arrowkeys $ C (Default: true) - Whether user can use up/down arrow keys inside the hours & minutes input to increase or decrease its values.

  • hour-step $ C (Default: 1) - Number of hours to increase or decrease when using a button.

  • max $ (Default: undefined) - Maximum time a user can select.

  • meridians $ C (Default: null) - Meridian labels based on locale. To override you must supply an array like ['AM', 'PM'].

  • min $ (Default: undefined) - Minimum time a user can select

  • minute-step $ C (Default: 1) - Number of minutes to increase or decrease when using a button.

  • mousewheel $ C (Default: true) - Whether user can scroll inside the hours & minutes input to increase or decrease its values.

  • ng-disabled $ (Default: false) - Whether or not to disable the component.

  • ng-model $ - Date object that provides the time state.

  • pad-hours $ (Default: true) - Whether the hours column is padded with a 0.

  • readonly-input $ C (Default: false) - Whether user can type inside the hours & minutes input.

  • second-step $ C (Default: 1) - Number of seconds to increase or decrease when using a button.

  • show-meridian $ C (Default: true) - Whether to display 12H or 24H mode.

  • show-seconds $ C (Default: false) - Show seconds input.

  • show-spinners $ C (Default: true) - Show spinner arrows above and below the inputs.

  • tabindex (Defaults: 0) - Sets tabindex for each control in the timepicker.

  • template-url C (Defaults: uib/template/timepicker/timepicker.html) - Add the ability to override the template used on the component.


This component makes no claims of absolutely supporting the preservation of dates in all cases, and it is highly recommended that model tracking of dates is encapsulated in a different object. This component should not be used with the same model as the datepicker. This is due to edge cases with situations such as Daylight Savings timezone changes which require a modification of the date in order to prevent an impossible to increment or decrement situation. See #5485 for details.

If the model value is updated (i.e. via Date.prototype.setDate), you must update the model value by breaking the reference by modelValue = new Date(modelValue) in order to have the timepicker update.