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.

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

angular time picker dropdown

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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Leave a Reply

Your email address will not be published. Required fields are marked *