npm i ng-clock-picker-lib --save
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 { }<form [formGroup]="form">
<input ngClockPicker [ngClockPickerConfig]="config" formControlName="time" />
</form>
<input [(ngModel)]="time" ngClockPicker [ngClockPickerConfig]="config" />
<input ngClockPicker (ngClockPickerChange)="handleTimeChange($event)" />
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))
}
}export interface ClockPickerConfig {
wrapperClassName?: string;
buttonCancel?: string;
buttonConfirm?: string;
closeOnOverlayClick?: boolean;
initialValue?: string;
is24?: boolean;
}Customize your clock picker styles by passing wrapperClassName to config object.
.my-class-name .clock-picker__item-button--selected {
background-color: $color-primary;
color: $color-text-light;
}
.my-class-name .clock-picker__item-button--selected:hover {
background-color: $color-primary;
color: $color-text-light;
}
.my-class-name .clock-picker__clock-face .clock-picker__clock-face__tick {
stroke: $color-primary;
}
.my-class-name .clock-picker__clock-face .clock-picker__clock-face__center {
fill: $color-primary;
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent