Angular Timepicker v-17+

An Angular library that offers a visually intuitive and user-friendly time picker component using a clock face interface. This time picker is designed to enhance user experience by allowing them to easily select hours and minutes with a simple and interactive clock-style interface.

Install

npm install --save wts-timepicker

Getting started

import { Component} from '@angular/core';

import { WtsTimepickerComponent, TimepickerDirective, IOptions } from 'wts-timepicker';

@Component({
  selector: '<COMPONENT-SELECTOR>',
  standalone: true,
  imports: [WtsTimepickerComponent, TimepickerDirective],
  templateUrl: '<COMPONENT>.html',
  styleUrl: '<COMPONENT>.scss',
})

export class MyComponent {
  protected selectedTime = '02:45 pm';

  options: IOptions = {
    format: 12,
    minutesGap: 5,
    type: 'timepicker',
    footerEnabled: false,
    headerEnabled: true,
    appearance: 'dialog',
    positionY: 'auto',
    positionX: 'left',
    closeOnEscape: true,
    autoClose: true
}


   protected onChange(e: string): void {
    this.selectedTime = e;
  }
}

<div class="myclass">
  <input type="text" [value]="selectedTime" [picker]="picker">
  <wts-timepicker #picker [value]="selectedTime" [options]="options" (change)="onChange($event)"></wts-timepicker>
</div>

Example

Stackblitz Demo