3.0.9 • Published 5 months ago
wts-timepicker v3.0.9
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
3.0.9
5 months ago
3.0.4
6 months ago
3.0.3
6 months ago
3.0.2
6 months ago
3.0.1
6 months ago
3.0.8
5 months ago
3.0.7
6 months ago
3.0.6
6 months ago
3.0.5
6 months ago
3.0.0
6 months ago
2.2.0
9 months ago
2.1.9
9 months ago
2.1.8
9 months ago
2.1.7
9 months ago
2.1.6
9 months ago
2.1.5
9 months ago
2.1.4
9 months ago
2.1.3
9 months ago
2.1.2
9 months ago
2.1.1
9 months ago
2.1.0
9 months ago
2.0.8
9 months ago
2.0.7
9 months ago
2.0.6
9 months ago
2.0.5
9 months ago
2.0.4
9 months ago
2.0.3
9 months ago
2.0.2
9 months ago
2.0.1
9 months ago
2.0.0
9 months ago
1.0.5
10 months ago
1.0.4
10 months ago
1.0.3
10 months ago
1.0.2
10 months ago
1.0.1
10 months ago
1.0.0
10 months ago
0.0.1
10 months ago