# ngx-material-timepicker

> Handy material design timepicker for angular

Latest version **13.1.1** (published 2023-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-material-timepicker
pnpm add ngx-material-timepicker
yarn add ngx-material-timepicker
bun add ngx-material-timepicker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 13.1.1 |
| Published | 2023-07-11 |
| First published | 2018-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 334 |
| Author | Vitalii Boiko |
| Maintainers | agranom |
| Keywords | angular, angular 2, angular 4, angular 5, angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16, material design, timepicker, material timepicker, ngx timepicker, angular timepicker, ng timepicker |

## Links

- npm: https://www.npmjs.com/package/ngx-material-timepicker
- Repository: https://github.com/Agranom/ngx-material-timepicker
- Homepage: https://github.com/Agranom/ngx-material-timepicker#readme
- Issues: https://github.com/Agranom/ngx-material-timepicker/issues
- npm.io page: https://npm.io/package/ngx-material-timepicker

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 13.1.1 (latest) — 2023-07-11
- 13.1.0 — 2023-06-19
- 13.0.3 — 2023-06-14
- 13.0.2 — 2023-06-14
- 13.0.1 — 2023-06-14
- 13.0.0 — 2023-06-14
- 12.1.0 — 2023-06-13
- 12.0.3 — 2023-06-13
- 12.0.2 — 2023-06-13
- 12.0.1 — 2023-06-13
- 12.0.0 — 2023-06-13
- 11.0.0 — 2023-06-13
- 9.0.0 — 2023-06-13
- 5.6.0 — 2023-06-12
- 5.5.5 — 2023-06-09
- … 73 more at https://npm.io/package/ngx-material-timepicker/versions

## README

# Angular Material Timepicker

[![Build Status](https://travis-ci.org/Agranom/ngx-material-timepicker.svg?branch=master)](https://travis-ci.org/Agranom/ngx-material-timepicker)
[![codecov](https://codecov.io/gh/Agranom/ngx-material-timepicker/branch/master/graph/badge.svg?token=4gxj8PFT05)](https://codecov.io/gh/Agranom/ngx-material-timepicker)
[![npm version](https://badge.fury.io/js/ngx-material-timepicker.svg)](https://badge.fury.io/js/ngx-material-timepicker)

Handy multifunctional [material design](https://material.io/guidelines/components/pickers.html#pickers-time-pickers) timepicker for Angular 6.0+

## Demo

https://agranom.github.io/ngx-material-timepicker/

## Table of contents
* [Getting started](#getting-started)
* [Internationalization](#internationalization)
* [Documentation](#documentation)
    * [NgxTimepicker](#ngxtimepicker)
    * [NgxMaterialTimepickerComponent](#ngxmaterialtimepickercomponent)
    * [NgxTimepickerFieldComponent](#ngxtimepickerfieldcomponent)
    * [NgxMaterialTimepickerToggleComponent](#ngxmaterialtimepickertogglecomponent)
    * [NgxMaterialTimepickerToggleIconDirective](#ngxmaterialtimepickertoggleicondirective)
    * [NgxMaterialTimepickerThemeDirective (deprecated)](#ngxmaterialtimepickerthemedirective)
* [Development](#development)
* [Tests](#tests)
* [License](#license)

## Getting started

Install timepicker through npm:
```angular2html
npm install --save ngx-material-timepicker
npm install --save luxon
```
Next import the timepicker module into your app's module:
```typescript
import {NgModule} from '@angular/core';
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';

@NgModule({
  imports: [NgxMaterialTimepickerModule]
})
export class MyModule {}
```
Finally connect the timepicker to an input via a template property:
```angular2html
<input [ngxTimepicker]="picker">
<ngx-material-timepicker #picker></ngx-material-timepicker>
```
The timepicker opens once you click on the input

## Internationalization
Timepicker supports locales in format `BCP 47`. It has `en-US` locale by default.

To override default locale and numbering system (`latn` or `arab`):
```typescript
import {NgModule} from '@angular/core';
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';

@NgModule({
  imports: [NgxMaterialTimepickerModule.setOpts('ar-AE', 'arab')]
})
export class MyModule {}
```
 
## Documentation

#### API reference for Angular Material Timepicker
```typescript
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
```
#### NgxTimepicker

Directive responsible for managing the timepicker popup and setting value to input

Selector: `ngxTimepicker`

**Properties**

| Name | Description |
|------|-------------|
| @Input()
  ngxTimepicker: NgxMaterialTimepickerComponent | The timepicker that this input is associated with. | 
| @Input()
  disabled: boolean | Weather the timepicker popup should be disabled. |
| @Input()
  value: string | Set a default value and time for a timepicker. The format of the time is in 12 hours notation `11:00 PM` or in 24 hours notation `23:00`. A Date string won't work. |
| @Input()
  format: number | `12` or `24` . 12h/24h view for hour selection clock . `12` (AM/PM) format by default. |
| @Input()
  min: string or DateTime | Set min time for timepicker (`11:15 pm` ) |
| @Input()
  max: string or DateTime | Set max time for timepicker (`11:15 pm` ) |
| @Input()
  disableClick: boolean | Set `true` to disable opening timepicker by clicking on the input |

  
#### NgxMaterialTimepickerComponent

Component responsible for visualisation the timepicker

Selector: `ngx-material-timepicker`

**Properties**


| Name | Description |
|------|-------------|
| @Input()
  cancelBtnTmpl: TemplateRef<Node> |  Set if you want to change cancel button to your custom one. | 
| @Input()
  confirmBtnTmpl: TemplateRef<Node> | Set if you want to change confirm button to your custom one. |
| @Input()
  editableHintTmpl: TemplateRef<Node> | Set if you want to change dial hint to your custom one. Works only if `enableKeyboardInput = true` |
| @Input()
  ESC: boolean | Disable or enable closing timepicker by ESC. |
| @Input()
  enableKeyboardInput: boolean | To disable or enable changing time through a keyboard on the timepicker dial without interaction with a clock face. Set `false` by default |
| @Input()
  minutesGap: number | To define a gap between minutes. Set `1` by default |
| @Input()
  defaultTime: string | Set default time for a timepicker. `12:00 AM` by default |
| @Input()
  preventOverlayClick: boolean | Set `true` to prevent closing the timepicker by overlay click. Uses `false` by default |
| @Input()
  disableAnimation: boolean | Set `true` to prevent opening and closing timepicker animation. Uses `false` by default |
| @Input()
  hoursOnly: boolean | Set `true` to prevent switching to minutes automatically once hour is selected. Uses `false` by default |
| @Input()
  theme: NgxMaterialTimepickerTheme |  Custom css properties which will override the defaults |
| @Input()
  timepickerClass: string |  To provide a custom css class for the timepicker |
| @Output()
  timeSet: EventEmitter\<string\> | Emits time when that was set. |
| @Output()
  opened: EventEmitter\<null\> | Emits after timepicker was opened. |
| @Output()
  closed: EventEmitter\<null\> | Emits after timepicker was closed. |
| @Output()
  hourSelected: EventEmitter\<number\> | Emits after hour was selected. |
| @Output()
  timeChanged: EventEmitter\<string\> | Emits once time was changed. |
  
#### NgxTimepickerFieldComponent

The timepicker as a control.

Selector: `ngx-timepicker-field`

**Properties**


| Name | Description |
|------|-------------|
| @Input()
  disabled: boolean |  Whether the timepicker is disabled| 
| @Input()
  toggleIcon: TemplateRef\<HTMLObjectElement\> | Provide custom `svg` icon for toggle button |
| @Input()
  buttonAlign: 'right' or 'left' | Positioning toggle button (`right` by default) |
| @Input()
  clockTheme: NgxMaterialTimepickerTheme | Custom css properties which will override timepicker clock |
| @Input()
  controlOnly: boolean | Hide or display toggle button with the timepicker clock |
| @Input()
  format: number | `12` or `24` . Set format for timepicker. `12` (AM/PM) format by default. |
| @Input()
  cancelBtnTmpl: TemplateRef\<Node\> |  Set if you want to change cancel button for timepicker to your custom one. | 
| @Input()
  confirmBtnTmpl: TemplateRef\<Node\> | Set if you want to change confirm button for timepicker to your custom one. |
| @Input()
  min: string or DateTime | Set min time for timepicker (`11:15 pm` ) |
| @Input()
  max: string or DateTime | Set max time for timepicker (`11:15 pm` ) |
| @Input()
  minutesGap: number | To define a gap between minutes. Set `1` by default |
| @Output()
  timeChanged: EventEmitter\<string\> | Emit a new time once it is changed. |

  
#### NgxMaterialTimepickerToggleComponent

Component responsible for opening the timepicker.

Selector: `ngx-material-timepicker-toggle`

**Properties**


| Name | Description |
|------|-------------|
| @Input()
  for: NgxMaterialTimepickerComponent |  Timepicker instance that the button will toggle | 
| @Input()
  disabled: boolean | Whether the toggle button is disabled |
  
#### NgxMaterialTimepickerToggleIconDirective

Can be used to override the icon of a `NgxMaterialTimepickerToggleComponent`.

Selector: `[ngxMaterialTimepickerToggleIcon]`

#### NgxMaterialTimepickerThemeDirective (deprecated)

Can be used to override styles of a `NgxMaterialTimepicker`.

Selector: `ngx-material-timepicker[ngxMaterialTimepickerTheme]`

**Properties**

| Name | Description |
|------|-------------|
| @Input()
  ngxMaterialTimepickerTheme: NgxMaterialTimepickerTheme |  Custom css properties which will override the defaults | 

## Development

### Prepare your environment

Install local dev dependencies: `npm install` while current directory is this repo.
 
### Development server

Run `npm start` to start a development server on a port 4200.

Open `http//:localhost:4200` on your browser.

## Tests

Run `npm test` to run tests once or `npm run test:watch` to continually run tests.

## License

MIT

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