ngx-material-timepicker-uwfm
v2.6.1
Published
Handy material design timepicker for angular
Downloads
60
Maintainers
Readme
ngx-material-timepicker
Handy material design timepicker for Angular 6.0+
Demo
https://agranom.github.io/ngx-material-timepicker/
Getting started
Install timepicker through npm:
npm install --save ngx-material-timepicker
Next import the timepicker module into your apps module:
import {NgModule} from '@angular/core';
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
@NgModule({
imports: [NgxMaterialTimepickerModule.forRoot()]
})
export class MyModule {}
Finally connect the timepicker to an input via a template property:
<input [ngxTimepicker]="picker">
<ngx-material-timepicker #picker></ngx-material-timepicker>
The timepicker opens once you click on the input
Documentation
API reference for Angular Material Timepicker
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
NgxTimepicker
Directive responsible for managing the timepicker popup and setting value to input
Selector: ngxTimepicker
Properties
| Name | Description |
|------|-------------|
| @Input()
ngxTimepicker: NgxMaterialTimepickerComponent | The timepicker that this input is associated with. |
| @Input()
disabled: boolean | Weather the timepicker popup should be disabled. |
| @Input()
value: string | Set default time for timepicker. |
| @Input()
format: number | 12
or 24
. 12h/24h view for hour selection clock . 12
(AM/PM) format by default. |
| @Input()
min: string or Moment | Set min time for timepicker (11:15 pm
or moment().hour(11).minute(15)
) |
| @Input()
max: string or Moment | Set max time for timepicker (11:15 pm
or moment().hour(11).minute(15)
) |
| @Input()
disableClick: boolean | Set true
to disable opening timepicker by clicking on the input |
NgxMaterialTimepickerComponent
Component responsible for visualisation the timepicker
Selector: ngx-material-timepicker
Properties
| Name | Description | |------|-------------| | @Input() cancelBtnTmpl: TemplateRef | Set if you want to change cancel button to your custom one. | | @Input() confirmBtnTmpl: TemplateRef | Set if you want to change confirm button to your custom one. | | @Input() ESC: boolean | Disable or enable closing timepicker by ESC. | | @Output() timeSet: EventEmitter<string> | Emits time when that was set. | | @Output() closed: EventEmitter<null> | Emits after timepicker was closed. |
NgxMaterialTimepickerToggleComponent
Component responsible for opening the timepicker.
Selector: ngx-material-timepicker-toggle
Properties
| Name | Description | |------|-------------| | @Input() for: NgxMaterialTimepickerComponent | Timepicker instance that the button will toggle | | @Input() disabled: boolean | Whether the toggle button is disabled |
NgxMaterialTimepickerToggleIconDirective
Can be used to override the icon of a NgxMaterialTimepickerToggleComponent
.
Selector: [ngxMaterialTimepickerToggleIcon]
Development
Prepare your environment
Install local dev dependencies: npm install
while current directory is this repo.
Development server
Run npm start
to start a development server on a port 4200.
Open http//:localhost:4200
on your browser.
Tests
Work is in progress.
License
MIT