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 |
---|---|
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
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 { MatTimepickerModule, provideNativeDateTimeAdapter } from "@dhutaryan/ngx-mat-timepicker";
@NgModule({
imports: [
// ...
MatTimepickerModule,
// ...
],
providers: [provideNativeDateTimeAdapter()]
})
export class MyModule {}
or create your own
import {
…
Top comments (2)
this is so good! Thank you
Looks really nice!