PHPackages                             webcito/bs-timepicker - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. webcito/bs-timepicker

ActiveLibrary[Utility & Helpers](/categories/utility)

webcito/bs-timepicker
=====================

A jQuery timepicker plugin with a Bootstrap 5 styled trigger and dropdown UI.

v1.0.6(4w ago)119↓84%proprietaryPHP

Since Mar 24Pushed 2w agoCompare

[ Source](https://github.com/ThomasDev-de/bs-timepicker)[ Packagist](https://packagist.org/packages/webcito/bs-timepicker)[ Fund](https://www.buymeacoffee.com/thomas81)[ RSS](/packages/webcito-bs-timepicker/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (7)Dependencies (9)Versions (8)Used By (0)

bsTimepicker v1.0.6
===================

[](#bstimepicker-v106)

`bsTimepicker` is a jQuery time picker plugin with a Bootstrap-styled trigger and dropdown UI. It supports 12-hour and 24-hour display modes, stores values in a database-friendly 24-hour format, and works with `input` and `div` elements.

The picker uses a circular clock-style selector inspired by mobile alarm/time picker interfaces while staying easy to drop into existing Bootstrap-based forms.

Features
--------

[](#features)

- jQuery plugin exposed as `$.fn.bsTimepicker`
- Bootstrap 4/5 styled trigger button and dropdown
- 12h and 24h display modes
- Configurable minute interval: 1, 5, 10, or 15 minutes
- Database-friendly value handling via `val()`
- Supports `input`, `div`, and `input` inside Bootstrap `form-floating`
- Optional hidden field support with `nameField`
- Touch-friendly circular dial with draggable active pointer support
- Public API for show, hide, toggle, set, get, and value access
- Event hooks for initialization, visibility changes, and value changes
- Customizable `okLabel` and `cancelLabel` with HTML support (Icons + Text)
- Automatic state revert when cancelling or clicking outside
- Compact design for better UI integration

Requirements
------------

[](#requirements)

- jQuery 3.x
- Bootstrap 4.6.x or 5.x
- Bootstrap Icons for the default trigger icon and any icon labels you configure
- Bootstrap JS must be loaded because the plugin uses the Bootstrap dropdown component

Installation
------------

[](#installation)

Include your vendor assets and the plugin script.

```

```

Quick start
-----------

[](#quick-start)

### 24-hour input

[](#24-hour-input)

```

```

```
$("#time24").bsTimepicker({
    format: "24h"
});
```

### 12-hour input

[](#12-hour-input)

```

```

```
$("#time12").bsTimepicker({
    format: "12h"
});
```

### Div with generated hidden field

[](#div-with-generated-hidden-field)

```

```

```
$("#appointmentTime").bsTimepicker({
    format: "24h",
    defaultTime: "13:20",
    nameField: "appointment_time",
    btnClass: "btn btn-outline-primary",
    btnWidth: "220px"
});
```

### Minute interval

[](#minute-interval)

```
$("#appointmentTime").bsTimepicker({
    format: "24h",
    minuteInterval: 15
});
```

Supported root elements
-----------------------

[](#supported-root-elements)

### Input

[](#input)

When initialized on a regular `input`, the original input becomes the internal value field and the visible trigger button is rendered after it.

This is the best choice when the value should already exist in a normal form field.

### Input in `form-floating`

[](#input-in-form-floating)

When initialized on an input inside `.form-floating`, the original input stays visible and acts as the picker trigger.
The plugin creates an additional hidden input (with the original `name`) to submit the normalized 24-hour value.

### Div

[](#div)

When initialized on a `div`, the plugin renders the trigger inside that element. If `nameField` is provided, a hidden input is created so the value can be submitted with a form.

Value model
-----------

[](#value-model)

The plugin separates a display format from a stored value format.

- The UI may display either 12h or 24h time.
- The stored value is intended to be a 24-hour string in `HH:mm` format.
- Empty values are returned as `null` through `val()`.

Examples:

- Visible UI: `12:30 AM` → stored value: `00:30`
- Visible UI: `12:30 PM` → stored value: `12:30`
- Visible UI: `03:45 PM` → stored value: `15:45`

Options
-------

[](#options)

```
{
    "format": "24h",
    "defaultTime": null,
    "nameField": null,
    "title": "Select time",
    "closeOnSelect": false,
    "minuteInterval": 5,
    "btnClass": "btn btn-outline-secondary",
    "btnWidth": null,
    "btnEmptyText": "--:--",
    "showClearButton": true,
    "icons": {
        "trigger": "bi bi-clock"
    },
    "clearLabel": "Clear",
    "okLabel": "OK",
    "cancelLabel": "Cancel"
}
```

### `format`

[](#format)

Type: `string`

Allowed values:

- `"24h"`
- `"12h"`

Controls how the time is displayed in the picker and trigger.

### `defaultTime`

[](#defaulttime)

Type: `string | Date | object | null`

Examples:

- `"13:45"`
- `"01:45 PM"`
- `new Date()`
- `{ hour24: 13, minute: 45 }`

Used when no initial value is already present on the source element.

### `nameField`

[](#namefield)

Type: `string | null`

Only relevant when the plugin is initialized on a `div`. Creates a hidden input with the provided `name`.

### `title`

[](#title)

Type: `string | null`

Optional title is displayed at the top of the dropdown panel. Set it to `null` or an empty string to hide the title.

### `closeOnSelect`

[](#closeonselect)

Type: `boolean`

When `true`, the picker closes automatically after selecting minutes.

### `minuteInterval`

[](#minuteinterval)

Type: `number`

Allowed values:

- `1`
- `5`
- `10`
- `15`

Controls the selectable minute steps in the minute dial. The default is `5`. With `minuteInterval: 1`, the dial keeps 5-minute labels as visual anchors while tap and drag selection still resolves to every minute.

Examples:

```
minuteInterval: 1   // every minute
minuteInterval: 5   // 00, 05, 10, ...
minuteInterval: 10  // 00, 10, 20, ...
minuteInterval: 15  // 00, 15, 30, 45
```

### `btnClass`

[](#btnclass)

Type: `string`

Bootstrap classes are applied to the visible trigger button.

Example:

```
btnClass: "btn btn-outline-primary"
```

### `btnWidth`

[](#btnwidth)

Type: `string | null`

Optional width for the trigger button.

Example:

```
btnWidth: "220px"
```

### `btnEmptyText`

[](#btnemptytext)

Type: `string`

Text shown in the trigger when no value is set.

Default is `--:--`.

### `showClearButton`

[](#showclearbutton)

Type: `boolean`

Shows a clear button in the picker footer that resets the value to empty (`null` in `val()`).

### `clearLabel`

[](#clearlabel)

Type: `string`

HTML or text for the clear button.

### `icons`

[](#icons)

Type: `object`

Controls the Bootstrap Icon classes used by the trigger.

Example:

```
{
    "icons": {
        "trigger": "bi bi-clock"
    }
}
```

### `okLabel`

[](#oklabel)

Type: `string`

HTML or text for the confirmation button.

### `cancelLabel`

[](#cancellabel)

Type: `string`

HTML or text for the cancel button.

Public API
----------

[](#public-api)

### Initialize

[](#initialize)

```
$("#time24").bsTimepicker({
    format: "24h"
});
```

### `getTime()`

[](#gettime)

Returns a structured object with display and normalized values.

```
const data = $("#time24").bsTimepicker("getTime");
```

Example result:

```
{
    "hour24": 13,
    "minute": 40,
    "hour12": 1,
    "meridiem": "PM",
    "formatted24": "13:40",
    "formatted12": "01:40 PM",
    "formatted": "13:40",
    "isEmpty": false
}
```

Empty result (after clear):

```
{
    "hour24": null,
    "minute": null,
    "hour12": null,
    "meridiem": null,
    "formatted24": null,
    "formatted12": null,
    "formatted": null,
    "isEmpty": true
}
```

### `setTime(value)`

[](#settimevalue)

Sets the current time.

```
$("#time24").bsTimepicker("setTime", "06:30");
$("#time12").bsTimepicker("setTime", "09:45 PM");
```

### `val()`

[](#val)

Returns the stored raw value as a string in `HH:mm` format, or `null` if empty.

```
const raw = $("#time24").bsTimepicker("val");
```

Examples:

- `"06:30"`
- `"00:30"`
- `null`

### `val(value)`

[](#valvalue)

Sets the stored value using a string.

```
$("#time24").bsTimepicker("val", "12:30");
$("#time12").bsTimepicker("val", "12:30 PM");
$("#time24").bsTimepicker("val", "");
```

Passing `""` or `null` clears the value and restores the empty trigger label.

### `clear()`

[](#clear)

Clears the value, updates the trigger label to the configured empty text, and fires change events.

```
$("#time24").bsTimepicker("clear");
```

### `show()`

[](#show)

Opens the dropdown picker.

```
$("#time24").bsTimepicker("show");
```

### `hide()`

[](#hide)

Closes the dropdown picker.

```
$("#time24").bsTimepicker("hide");
```

### `toggle()`

[](#toggle)

Toggles the dropdown picker.

```
$("#time24").bsTimepicker("toggle");
```

### `destroy()`

[](#destroy)

Destroys the plugin instance and removes the generated UI.

```
$("#time24").bsTimepicker("destroy");
```

Events
------

[](#events)

The plugin can emit the following events on the original root element.

### Initialization and visibility

[](#initialization-and-visibility)

- `init.bs.timepicker`
- `show.bs.timepicker`
- `shown.bs.timepicker`
- `hide.bs.timepicker`
- `hidden.bs.timepicker`

### Value changes

[](#value-changes)

- `change.bs.timepicker`
- `changeHour.bs.timepicker`
- `changeMinutes.bs.timepicker`
- `timeChange.bsTimepicker`
- `clear.bs.timepicker`

### Example

[](#example)

```
$("#time24").on("shown.bs.timepicker", function (e, data) {
    console.log("Picker opened", data);
});

$("#time24").on("change.bs.timepicker", function (e, data) {
    console.log("Time changed", data);
});

$("#time24").on("changeHour.bs.timepicker", function (e, data) {
    console.log("Hour changed", data.hour24);
});

$("#time24").on("changeMinutes.bs.timepicker", function (e, data) {
    console.log("Minutes changed", data.minute);
});
```

Database usage
--------------

[](#database-usage)

For most applications, store the value returned by `val()`.

```
const dbValue = $("#time24").bsTimepicker("val");
```

Typical values:

- `"06:30"`
- `"14:45"`
- `"00:05"`
- `null`

In most systems there is no need to store `AM` or `PM` separately. That is usually presentation logic only.

Example form integration
------------------------

[](#example-form-integration)

### Input-based field

[](#input-based-field)

```

```

```
$("#startTime").bsTimepicker({
    format: "24h"
});
```

### Div-based field with hidden input

[](#div-based-field-with-hidden-input)

```

```

```
$("#alarmTime").bsTimepicker({
    format: "12h",
    nameField: "alarm_time",
    btnEmptyText: "Please select a time"
});
```

Notes
-----

[](#notes)

- `val()` is intended for the database-friendly raw value.
- `getTime()` is intended for richer UI information.
- The plugin currently works with hours and minutes, not seconds.
- If your backend uses a database `TIME` column with seconds, you can still store the returned value and append `:00` server-side if needed.

Example demo setup
------------------

[](#example-demo-setup)

```

```

License
-------

[](#license)

MIT License

###  Health Score

39

—

LowBetter than 85% of packages

Maintenance95

Actively maintained with recent releases

Popularity10

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity39

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~10 days

Recently: every ~16 days

Total

7

Last Release

28d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81)

---

Top Contributors

[![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (17 commits)")

---

Tags

bootstrapbootstrap4bootstrap5clockformjqueryplugintime-pickertimepickeruiuijquerybootstraptimepickerbootstrap 4bootstrap-5time picker

### Embed Badge

![Health badge](/badges/webcito-bs-timepicker/health.svg)

```
[![Health](https://phpackages.com/badges/webcito-bs-timepicker/health.svg)](https://phpackages.com/packages/webcito-bs-timepicker)
```

###  Alternatives

[techlab/smartwizard

The awesome jQuery step wizard plugin

78799.8k2](/packages/techlab-smartwizard)[datatables.net/datatables.net-bs5

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap5\](https://getbootstrap.com/)

2190.7k17](/packages/datatablesnet-datatablesnet-bs5)[datatables.net/datatables.net-bs4

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap4\](https://getbootstrap.com/docs/4.6/getting-started/introduction/)

2925.1k15](/packages/datatablesnet-datatablesnet-bs4)[datatables.net/datatables.net-bs

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap\](https://getbootstrap.com/docs/3.3/)

161.4k14](/packages/datatablesnet-datatablesnet-bs)[digitv/yii2bootstrap4

Yii2 Bootstrap 4 widgets

142.5k](/packages/digitv-yii2bootstrap4)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)