# component-clock

> Clock UI component for use in time-picker

Latest version **3.0.3** (published 2026-09-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install component-clock
pnpm add component-clock
yarn add component-clock
bun add component-clock
```

## Health

**Score 65/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2026-09-15 |
| First published | 2013-02-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 11.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3 |
| Author | Damian Krzeminski |
| Maintainers | pirxpilot |
| Keywords | clock, time |

## Links

- npm: https://www.npmjs.com/package/component-clock
- Repository: https://github.com/pirxpilot/clock
- Homepage: https://github.com/pirxpilot/clock#readme
- Issues: https://github.com/pirxpilot/clock/issues
- npm.io page: https://npm.io/package/component-clock

## Dependencies (4)

- [bounds](https://npm.io/package/bounds.md) ~4
- [el-component](https://npm.io/package/el-component.md) ~2
- [component-emitter](https://npm.io/package/component-emitter.md) ~2
- [@pirxpilot/in-groups-of](https://npm.io/package/@pirxpilot/in-groups-of.md) ^1.1.1

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 3.0.3 (latest) — 2026-09-15
- 3.0.2 — 2026-09-14
- 3.0.1 — 2025-12-09
- 3.0.0 — 2025-04-26
- 2.0.4 — 2024-01-30
- 2.0.3 — 2022-04-13
- 2.0.2 — 2022-04-13
- 2.0.1 — 2019-02-22
- 2.0.0 — 2018-11-30
- 1.6.0 — 2017-12-18
- 1.5.2 — 2017-12-13
- 1.5.1 — 2017-02-19
- 1.3.0 — 2015-03-21
- 1.2.0 — 2014-03-20
- 1.1.1 — 2013-02-28

## README

[![NPM version][npm-image]][npm-url]
[![Build Status][build-image]][build-url]
[![Dependency Status][deps-image]][deps-url]


# clock

  Clock UI component for use in time-picker

  Click [here](http://pirxpilot.github.io/clock/) to see online demo.

## Installation

    $ npm install --save component-clock

## Example

```js
const Clock = require('component-clock');
const clock = new Clock();
clock.el.appendTo('body');
clock.select({
	hour: 11,
	minute: 30
});
```

## Events

  - `change` (time, complete) - when the selected time is modified
  	`time` is an object with `hour` and `minute` properties,
  	`complete` is true only if both hours and minutes have been clicked by the user

## API

### Clock({ captions })

- `captions` - optional dictionary { hours, minutes, am, pm } - entries will be used by clock to render
captions for Hours, Minutes, AM and PM - `Object` or [`HTMLElement.dataset`][dataset] can be used as a dictionary

### Clock#select(time)

Select the given `time` ({ hour, minute }).

### Clock#min(minTime)

Define the minimum time selectable with this clock (inclusive). Time values smaller than `minTime`
are rendered with `invalid` class. All `change` events are generated only for values larger or equal
to `minTime`.

### Clock#max(maxTime)

Define the maximum time selectable with this clock (inclusive). Time values larger than `maxTime`
are rendered with `invalid` class. All `change` events are generated only for values smaller or equal
to `maxTime`.

### Clock#type(type)

Set type to `12` to display 12 hour am/pm type of clock. Any other value resets the clock display
to standard 24 hour display.

## License

  MIT

[dataset]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

[npm-image]: https://img.shields.io/npm/v/component-clock
[npm-url]: https://npmjs.org/package/component-clock

[build-url]: https://github.com/pirxpilot/clock/actions/workflows/check.yaml
[build-image]: https://img.shields.io/github/actions/workflow/status/pirxpilot/clock/check.yaml?branch=main

[deps-image]: https://img.shields.io/librariesio/release/npm/component-clock
[deps-url]: https://libraries.io/npm/component-clock

---
_Source: https://npm.io/package/component-clock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._