# code42day-clock

> Clock UI component for use in time-picker

Latest version **1.5.0** (published 2017-02-05) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2017-02-05 |
| First published | 2015-09-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Damian Krzeminski |
| Maintainers | pirxpilot |
| Keywords | clock, time |

## Links

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

## Dependencies (10)

- [bounds](https://npm.io/package/bounds.md) ~1
- [dataset](https://npm.io/package/dataset.md) ~0
- [inherits](https://npm.io/package/inherits.md) ^2.0.1
- [el-component](https://npm.io/package/el-component.md) ^1.0.0
- [range-component](https://npm.io/package/range-component.md) ^1.0.0
- [component-domify](https://npm.io/package/component-domify.md) ^1.2.2
- [component-events](https://npm.io/package/component-events.md) ^1.0.9
- [component-classes](https://npm.io/package/component-classes.md) ^1.2.4
- [component-emitter](https://npm.io/package/component-emitter.md) ^1.2.0
- [code42day-in-groups-of](https://npm.io/package/code42day-in-groups-of.md) ^1.0.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

- 1.5.0 (latest) — 2017-02-05
- 1.4.1 — 2017-02-04
- 1.4.0 — 2016-01-27
- 1.3.4 — 2015-09-18
- 1.3.3 — 2015-09-17
- 1.3.2 — 2015-09-13

## 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/code42day-clock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._