Press "Enter" to skip to content

Easy To Use Time Picker for Angular Apps | ng-clockpicker

ng-clockpicker is a clock-style time picker for the Angular app, inspired by Material Design.

angular material time picker, angular time picker dropdown, angular timepicker npm, custom time picker angular, time picker in angular

JQuery Plugin Clock Timer Inspired Android Time Picker

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))
  }
}

angular time picker dropdown

Easy Time Picker For Angular, ng clock picker Plugin/Github


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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.