https://github.com/dhutaryan/ngx-mat-timepicker
Material timepicker based on material design
https://github.com/dhutaryan/ngx-mat-timepicker
angular angular-components mat-timepicker material material-design material-timepicker ngx-mat-timepicker timepicker
Last synced: about 2 months ago
JSON representation
Material timepicker based on material design
- Host: GitHub
- URL: https://github.com/dhutaryan/ngx-mat-timepicker
- Owner: dhutaryan
- License: mit
- Created: 2022-05-17T19:21:04.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-07-04T12:51:38.000Z (4 months ago)
- Last Synced: 2025-07-04T14:13:40.397Z (4 months ago)
- Topics: angular, angular-components, mat-timepicker, material, material-design, material-timepicker, ngx-mat-timepicker, timepicker
- Language: TypeScript
- Homepage: https://dhutaryan.github.io/ngx-mat-timepicker/
- Size: 10.3 MB
- Stars: 80
- Watchers: 1
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - dhutaryan/ngx-mat-timepicker - Material timepicker based on material design. (Third Party Components / Dates)
- awesome-angular - dhutaryan/ngx-mat-timepicker - Material timepicker based on material design. (Third Party Components / Dates)
- trackawesomelist - dhutaryan/ngx-mat-timepicker (⭐60) - Material timepicker based on material design. (Recently Updated / [Sep 02, 2024](/content/2024/09/02/README.md))
- fucking-awesome-angular - dhutaryan/ngx-mat-timepicker - Material timepicker based on material design. (Table of contents / Third Party Components)
README
# ngx-mat-timepicker
[](https://www.npmjs.com/package/@dhutaryan/ngx-mat-timepicker)
[](https://www.codefactor.io/repository/github/dhutaryan/ngx-mat-timepicker)
[](https://github.com/dgutoryan/ngx-timepicker/blob/master/LICENSE)
The timepicker module using Angular material.
### Versions
| mat-timepicker | Angular |
| -------------- | ------------------- |
| 20.x.x | >=20.0.0 |
| 19.x.x | >=19.0.0 |
| 18.x.x | >=18.0.0 |
| 17.x.x | ^17.0.0 |
| 16.x.x | ^16.0.0 |
| 15.x.x | ^15.0.0 |
| 14.x.x | ^14.0.0 |
| 13.x.x | >=13.0.0 && <15.0.0 |
| 12.x.x | >=12.0.0 && <15.0.0 |
## Documentation
Check out the [documentation](https://dhutaryan.github.io/ngx-mat-timepicker/).
## Installation
You have to install the Angular Material and set it up. [Learn more about the setup](https://material.angular.io/guide/getting-started).
Install the library:
```bash
$ npm install --save @dhutaryan/ngx-mat-timepicker
```
or
```bash
$ yarn add @dhutaryan/ngx-mat-timepicker
```
## Getting started
Import `MatTimepickerModule` to your project.
```typescript
import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
@NgModule({
imports: [
// ...
MatTimepickerModule,
// ...
],
})
export class MyModule {}
```
## Adapter
Add a timepicker adapter.
```typescript
import { MatTimepickerModule, provideNativeDateTimeAdapter } from "@dhutaryan/ngx-mat-timepicker";
@NgModule({
imports: [
// ...
MatTimepickerModule,
// ...
],
providers: [provideNativeDateTimeAdapter()]
})
export class MyModule {}
```
or create your own
```typescript
import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
@NgModule({
imports: [
// ...
MatTimepickerModule,
// ...
],
providers: [{ provide: TimeAdapter, useClass: MyTimeAdapter }],
})
export class MyModule {}
```
## Theming
Then you have to define a theme. [More details about theming](https://material.angular.io/guide/theming).
```scss
@use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;
// timepicker uses these component
@include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);
@include mat.input-theme(theme.$ngx-mat-timepicker-theme);
@include mat.button-theme(theme.$ngx-mat-timepicker-theme);
@include mat.fab-theme(theme.$ngx-mat-timepicker-theme);
@include mat.icon-button-theme(theme.$ngx-mat-timepicker-theme);
@include mat.divider-theme(theme.$ngx-mat-timepicker-theme);
// timepicker theme
@include mat-timepicker.timepicker-theme($theme);
// if you want to support color attribute in M3 add compatibility mixin
@include mat.color-variants-backwards-compatibility($my-theme)
```
You can also use `mat.theme` mixin instead.
## Usage
```html
```
## Locale
Default locale is `en-US`. You can set your locale as:
```typescript
import { NgModule } from '@angular/core';
import { MAT_TIME_LOCALE } from "@dhutaryan/ngx-mat-timepicker";
@NgModule({
imports: [
// ...
],
providers: [{ provide: MAT_TIME_LOCALE, useValue: "en-GB" }],
})
export class MyModule {}
```
## License
MIT