ngx-angular-time-picker-library
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

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

    Install

    npm i ngx-angular-time-picker-library

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    250 kB

    Total Files

    14

    Last publish

    Collaborators

    • bitto.kazi