TimepickerAngular

OR

Getting started

Install timepicker through npm:

npm i @power4-its/timepicker-angular

Internationalization

Next import the timepicker module into your app's module:

import {NgModule} from '@angular/core';
import { TimepickerAngular } from '@power4-its/timepicker-angular';

@NgModule({
  imports: [TimepickerAngular]
})

export class MyModule {}

Finally connect the timepicker to an input via a template property:

<timepicker-angular></timepicker-angular>

Properties

Timepicker properties are not type selectable

| Name | Description | |--------------------------|---------------------| | hoursTitle (string) | Title for hours | | minutesTitle (string) | Title for minutes | | right (boolean) | Position right | | left (boolean) | Position left | | ------------------------ | ------------------- |

<timepicker-angular hoursTitle='Hours' minutesTitle='Mins' [right]="true" 
    (onSelectedHour)="selectedHour($event)" (onSelectedMin)="selectedMin($event)">
</timepicker-angular>

onSelectedHour returns the hours and onSelectedMin returns the minutes

or

<timepicker-angular hoursTitile='Hours' minutesTitile='Mins' [right]="true"
    (onSelectedTime)="selectedTime($event)">
</timepicker-angular>

onSelectedTime returns the full time

| Name | Description | |--------------------------|-------------------------------------------| | select (boolean) | false - off, true - on | | stepMin (string) | Step for minutes (15, 30), default 5 | | stepHour (string) | Step for hours (08-18), default all hours | | ------------------------ | ------------------- |

<timepicker-angular [select]='true' stepHour='08-12' stepMin='15' 
    (onSelectedTime)="selectedTime($event)>
</timepicker-angular>

onSelectedTime returns the full time