Timepicker

With the Timepicker you can easily select a time for a text input using your mouse or keyboards arrow keys.

<timepicker bc-label="Start Time" />

Configuration

Steps

Specify a gradual increase for the minutes or seconds field. To set a step for the minutes field use the bc-minute-step attribute and set it to an integer between 1 and 60. The same is possible for the seconds field. Therefore use the bc-second-step attribute.

Seconds

To show a field for seconds set the bc-seconds attribute to true.

<timepicker bc-label="Start Time" bc-seconds="true" />

Meridian

To show a field for meridian selection set the bc-meridian attribute to true. By default, the meridian field is enabled.

Input Fields

To disable the input fields for hours, minutes, seconds and meridian set the bc-inputs attribute to false.

<timepicker bc-label="Start Time" bc-inputs="false" />

Icon

Set an icon addon for the timepicker with the bc-icon attribute.

<timepicker bc-label="Start Time" bc-icon="FA_Clock" />

Disable Focus

Setting the bc-disable-focus attribute to true disables the input from focusing. This is useful for touch screen devices that display a keyboard on input focus.