ng-clockpicker is a clock-style time picker for the Angular app, inspired by Material Design.
Must Read: Bootstrap Date Time Picker for BS 3/4 | datetimepicker
How to make use of it:
Install:
npm i ng-clock-picker-lib --save
1. Add NgClockPickerLibModule
to your module imports:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { NgClockPickerLibModule } from 'ng-clock-picker-lib'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, NgClockPickerLibModule, ReactiveFormsModule, FormsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
2. With reactive forms:
<form [formGroup]="form"> <input ngClockPicker [ngClockPickerConfig]="config" formControlName="time" /> </form>
3. With template-driven forms:
<input [(ngModel)]="time" ngClockPicker [ngClockPickerConfig]="config" />
4. With event binding:
<input ngClockPicker (ngClockPickerChange)="handleTimeChange($event)" />
5. By injecting service straight into the component:
import { Component, ViewContainerRef } from '@angular/core'; import { ClockPickerDialogService, ClockPickerConfig } from 'ng-clock-picker-lib'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { config: ClockPickerConfig = { wrapperClassName: 'className', closeOnOverlayClick: true }; constructor(private vcr: ViewContainerRef, private clockPickerDialogService: ClockPickerDialogService) {} ngOnInit(): void { this.clockPickerDialogService.registerViewContainerRef(this.vcr); } showModal(): void { this.clockPickerDialogService.showClockPickerDialog(this.config).subscribe((time: string) => console.log(time)) } }
See Demo And Download
Official Website(jedrzejiwanicki): Click Here
This superior jQuery/javascript plugin is developed by jedrzejiwanicki. For extra advanced usage, please go to the official website.