A new material timepicker component

I'd like to introduce a material timepicker component. If you use angular material you might know this popular issue. 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. You hardly recognise you're using a 3rd party library.

Install the library:

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

or

yarn add @dhutaryan/ngx-mat-timepicker

Unfortunately, all good names were busy 🫣

Import MatTimepickerModule and MatNativeDateTimeModule to your module.

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:

@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:

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

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

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

You can find more usage examples on the documentation page.

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.

dhutaryan / ngx-mat-timepicker

Material timepicker based on material design

ngx-mat-timepicker

The timepicker module using Angular material.

Versions

mat-timepicker	Angular
12.x.x	>=12.0.0 && <15.0.0
13.x.x	>=13.0.0 && <15.0.0
14.x.x	^14.0.0
15.x.x	^15.0.0
16.x.x	^16.0.0
17.x.x	^17.0.0

Documentation

Check out the documentation.

Installation

You have to install the Angular Material and set it up. Learn more about the setup.

Install the library:

$ npm install --save @dhutaryan/ngx-mat-timepicker

or

$ yarn add @dhutaryan/ngx-mat-timepicker

Getting started

Import MatTimepickerModule to your project.

import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    // ...
  ],
})
export class MyModule {}

Adapter

Add a timepicker adapter.

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

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    MatNativeDateTimeModule,
    // ...
  ],
})
export class MyModule {}

or create your own

import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
@NgModule

…

View on GitHub

Comments

[Max Prilutskiy]

Looks really nice!