JSPM

  • Created
  • Published
  • Downloads 62584
  • Score
    100M100P100Q160041F
  • License MIT

Handy material design timepicker for angular

Package Exports

  • ngx-material-timepicker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-material-timepicker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-material-timepicker

Handy material design timepicker for Angular 4.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: NgxMaterialTimepicker The timepicker that this input is associated with.
@Input()
disabled: boolean Weather the timepicker popup should be disabled.
@Input()
value: string Set time for an input. Now available format only hh:mm a.
@Input()
format: number 12 or 24 . Select time format that returns timepicker. 12 (AM/PM) format by default.

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.
@Output()
timeSet: EventEmitter Emits time when that was set.

Changes

Work is in progress.

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