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: 14 days 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 2 years ago)
• Default Branch: master
• Last Pushed: 2024-12-11T19:45:42.000Z (about 1 month ago)
• Last Synced: 2024-12-11T19:45:55.902Z (about 1 month 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: 4.25 MB
• Stars: 78
• Watchers: 1
• Forks: 8
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - dhutaryan/ngx-mat-timepicker - Material timepicker based on material design. (Table of contents / Third Party Components)
• 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)
• fucking-awesome-angular - dhutaryan/ngx-mat-timepicker - Material timepicker based on material design. (Table of contents / Third Party Components)

README

        
# ngx-mat-timepicker

[![npm](https://img.shields.io/npm/v/@dhutaryan/ngx-mat-timepicker.svg)](https://www.npmjs.com/package/@dhutaryan/ngx-mat-timepicker)

[![code factor](https://img.shields.io/codefactor/grade/github/dhutaryan/ngx-mat-timepicker)](https://www.codefactor.io/repository/github/dhutaryan/ngx-mat-timepicker)

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dgutoryan/ngx-timepicker/blob/master/LICENSE)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40dhutaryan%2Fngx-mat-timepicker)

The timepicker module using Angular material.

### Versions

| mat-timepicker | Angular             |

| -------------- | ------------------- |

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

```

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