A new material timepicker component
Tags: angular, material, timepicker, components
Published: 2023-12-28 22:02:46

I'd like to introduce a [material timepicker component](https://www.npmjs.com/package/@dhutaryan/ngx-mat-timepicker). If you use angular material you might know this [popular issue](https://github.com/angular/components/issues/5648). People are desperate for a time selection but not date only. I was one of them.

Unfortunately, a lot of existent libraries were out of date, had not the best UI or their functionality didn't suit for my project, had some bugs. I could choose from literally 2 libraries and none of them satisfied me completely.

### Let's go

Before we start let me tell you a few words. The timepicker is based on [material design](https://m2.material.io/components/time-pickers). You hardly recognise you're using a 3rd party library.

Install the library:

```bash
npm install --save @dhutaryan/ngx-mat-timepicker
```

or

```bash
yarn add @dhutaryan/ngx-mat-timepicker
```

Unfortunately, all good names were busy 🫣

Import `MatTimepickerModule` and `MatNativeDateTimeModule` to your module.

```typescript
import { MatNativeDateTimeModule, MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    MatNativeDateTimeModule,
    // ...
  ],
})
export class MyModule {}
```
Default adapter uses native JS date. You can create your own adapter and use whatever you want.

Add necessary styles:

```scss
@use "@angular/material" as mat;
@use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;

$my-theme: mat.define-light-theme(...);

// timepicker uses these component
@include mat.form-field-theme($my-theme);
@include mat.input-theme($my-theme);
@include mat.button-theme($my-theme);
@include mat.fab-theme($my-theme);
@include mat.icon-button-theme($my-theme);
@include mat.divider-theme($my-theme);

// timepicker theme
@include mat-timepicker.timepicker-theme($my-theme);
```

We've just set up our timepicker. It's time to use it:

```html
<mat-form-field>
  <input type="text" matInput [matTimepicker]="timepicker" />
  <mat-timepicker-toggle matSuffix [for]="timepicker"></mat-timepicker-toggle>
  <mat-timepicker #timepicker></mat-timepicker>
</mat-form-field>
```

![Timepicker dial mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07pp3iol6ojnuu755fda.png)

You can use another presentation mode if you like it more:

![Timepicker input mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w18a52eev26qhqbov6du.png)

Looks like it's a part of angular material, isn't it?

You can find more usage examples on the [documentation page](https://dhutaryan.github.io/ngx-mat-timepicker/#/usage).

Briefly about some features:
- 12h/24h format
- dial/input mode
- popup/dialog view
- min/max time
- different color palletes
- custom action buttons
- minutes interval
- touchUi mode

### What's the next?

There are some things to implement. Some of them are related to the adapter. It would be nice to have ready to use adapter with moment and luxon. Make components as standalone and so on.

---

I'm opened to any question and don't hesitate to create issues. Would be appreciated.

{% embed https://github.com/dhutaryan/ngx-mat-timepicker %}