ngx-angular-time-picker-library

ngx-angular-time-picker-library

This is a simple time picker which has infinite scrolling(UP/DOWN) for Angular. Time format 12hr/24hr supported.

Install

npm install ngx-angular-time-picker-library --save

Demo Link Below

Live Demo

Usage

in html file (app.component.html)

<form [formGroup]="form" style="float: left; width: 100%">
  <ngx-angular-time-picker
    [control]="form.controls.time"
    (onTimeChange)="onTimeChange($event)"
    [top]="'20px'"
    [left]="'0px'"
    [enableSecond]="true"
    [format]="'12hr'"
    [backgroundColorCell]="'#00b6ff'"
    [backgroundColorCellHover]="'#b0e8ff'"
  >
    <input
      type="text"
      formControlName="time"
      #timePickerInput
      (focus)="timePickerInput.blur()"
    />
  </ngx-angular-time-picker>
</form>

in componet file (app.component.ts)

import { Component, OnInit } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  public form: any;

  constructor() {
    this.form = new FormGroup({
      time: new FormControl("12:40 AM"),
    });
  }

  ngOnInit(): void {}

  onTimeChange($event: any) {
    console.log($event);
  }
}

in any module file for example (app.module.ts) add NgxAngularTimePickerLibraryModule

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgxAngularTimePickerLibraryModule } from "ngx-angular-time-picker-library";
import { ReactiveFormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    NgxAngularTimePickerLibraryModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Options

Props

Props	Default	Description
control: FormControl	null	FormControl
top: string	0px	offset from input
left: string	0px	offset from left
enableSecond: boolean	false	If second can be selected
format: string	24hr	can be 12hr or 24hr
backgroundColorCell: string	#00b6ff	Background color of selected cell
backgroundColorCellHover: string	#b0e8ff	Background color when hovering over cell

Callback Methods

Name	Type	Description
onTimeChange(Object)	Object	Outputs time in 24hr and 12hr example: { "24hr": "00:00", "12hr": "12:00 AM"}