DEV Community

Cover image for A new material timepicker component
Dzmitry Hutaryan
Dzmitry Hutaryan

Posted on • Updated on

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


Enter fullscreen mode Exit fullscreen mode

or



yarn add @dhutaryan/ngx-mat-timepicker


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

Timepicker dial mode

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

Timepicker input mode

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.

GitHub logo dhutaryan / ngx-mat-timepicker

Material timepicker based on material design

ngx-mat-timepicker

npm code factor license npm bundle size

The timepicker module using Angular material.

Versions

mat-timepicker Angular
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.

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
Enter fullscreen mode Exit fullscreen mode

or

$ yarn add @dhutaryan/ngx-mat-timepicker
Enter fullscreen mode Exit fullscreen mode

Getting started

Import MatTimepickerModule to your project.

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

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

Adapter

Add a timepicker adapter.

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

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    // ...
  ],
  providers: [provideNativeDateTimeAdapter()]
})
export class MyModule {}
Enter fullscreen mode Exit fullscreen mode

or create your own

import {
…
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
ibrastark profile image
Ibrahim Yasir

this is so good! Thank you

Collapse
 
maxprilutskiy profile image
Max Prilutskiy

Looks really nice!