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. webcito/bs-timepicker

ActiveLibrary

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

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

v1.0.2(1mo ago)05↑2900%proprietary

Since Mar 24Pushed 1mo agoCompare

[ Source](https://github.com/ThomasDev-de/bs-timepicker)[ Packagist](https://packagist.org/packages/webcito/bs-timepicker)[ RSS](/packages/webcito-bs-timepicker/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (3)Dependencies (3)Versions (4)Used By (0)

bsTimepicker v1.0.2
===================

[](#bstimepicker-v102)

`bsTimepicker` is a jQuery time picker plugin with a Bootstrap 5 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 5 styled trigger button and dropdown
- 12h and 24h display modes
- Database-friendly value handling via `val()`
- Supports `input` and `div` root elements
- Optional hidden field support with `nameField`
- Touch-friendly circular dial with pointer support
- Public API for show, hide, toggle, set, get, and value access
- Event hooks for initialization, visibility changes, and value changes
- Bootstrap Icons support for trigger, confirm, and cancel icons

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

[](#requirements)

- jQuery 3.x
- Bootstrap 5.x
- Bootstrap Icons for the default icons shown in the trigger and action buttons
- Bootstrap bundle 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"
});
```

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

[](#supported-root-elements)

### Input

[](#input)

When initialized on an `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.

### 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,
    "btnClass": "btn btn-outline-secondary",
    "btnWidth": null,
    "btnEmptyText": "Select time",
    "icons": {
        "trigger": "bi bi-clock",
        "cancel": "bi bi-x-lg",
        "ok": "bi bi-check-lg"
    }
}
```

### `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.

### `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.

### `icons`

[](#icons)

Type: `object`

Controls the Bootstrap Icon classes used by the trigger and action buttons.

Example:

```
{
    "icons": {
        "trigger": "bi bi-clock",
        "cancel": "bi bi-x-lg",
        "ok": "bi bi-check-lg"
    }
}
```

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"
}
```

### `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.

### `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`

### 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

37

—

LowBetter than 82% of packages

Maintenance98

Actively maintained with recent releases

Popularity5

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity35

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 ~0 days

Total

3

Last Release

46d 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 (5 commits)")

---

Tags

uijquerybootstraptimepickerbootstrap-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

[kartik-v/bootstrap-fileinput

An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with features for file preview for many file types, multiple selection, ajax uploads, and more.

5.4k7.9M13](/packages/kartik-v-bootstrap-fileinput)[techlab/smartwizard

The awesome jQuery step wizard plugin

79096.2k2](/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/)

2185.7k16](/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/)

2924.0k15](/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)

PHPackages © 2026

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